使用类继承时，在 jQuery 事件处理程序等对象中获取原始 this答案

【问题标题】：Getting the original this in an object for jQuery event handlers etc. when using class inheritance使用类继承时，在 jQuery 事件处理程序等对象中获取原始 this
【发布时间】：2010-12-05 11:41:44
【问题描述】：

我知道 jQuery 不是为使用类模型而设计的，但我确实可以扩展一个基类，因为它完全符合我的需求。

我首先做了以下事情：

jQuery.myBase = {
    foo: 'bar',
    bar: function() { ... }
}

jQuery.fn.myPlugin = function() {
   $.extend( this, jQuery.myBase, {
       oof: 'rab',
       rab: function() { ... }
  }
}

一切正常，我可以通过this 访问基本方法和属性。直到我尝试添加诸如 jQuery 事件处理程序（等）之类的东西，它将事件目标应用于 this。

所以有以下几点：

jQuery.myBase = {
    bar: function() { ... }
}

jQuery.fn.myPlugin = function() {
   jQuery.extend( this, jQuery.myBase, {
       init: function() {
           jQuery('#someEl').click( this.onClick );
       },

       onClick: function(e) {
           // this now references the element I bound the event to (<div id="someEl" />)
           // so the following doesn't work
           this.bar();
       }
  }
}

我发现了一些适用于 jQuery 的类创建和继承（例如 John Resig's one 和 DUI），但它们会/确实遇到同样的问题。

那么在所有这些之后，在这些情况下我如何才能找到原始的this？

更新：事件处理程序（等）可以在jQuery.myBase 或插件本身中。

【问题讨论】：

标签： jquery events class object this

【解决方案1】：

看起来他们是 addressing this in jQuery 根据 cmets 应该是 1.3.3 的一部分

【讨论】：

【解决方案2】：

另一种选择是遵循具有bind() 函数的原型方法（实际上与我的其他答案相同，但以更简洁的方式），正如this question 中指出的那样，例如：

if (!Object.bind) {
    Function.prototype.bind= function(owner) {
        var that= this;
        var args= Array.prototype.slice.call(arguments, 1);
        return function() {
            return that.apply(owner,
                args.length===0? arguments : arguments.length===0? args :
                args.concat(Array.prototype.slice.call(arguments, 0))
            );
        };
    };
}


jQuery.fn.myPlugin = function() {
   jQuery.extend( this, jQuery.myBase, {
       init: function() {
           jQuery('#someEl').click( this.onClick.bind( this ) );
       },

       onClick: function(e) {
           this.bar(); // this works
       }
  }
}

【讨论】：

【解决方案3】：

您需要在适当的范围内对其进行引用。

jQuery.fn.myPlugin = function() {
   var $this = this;  // Scope it up!
   jQuery.extend( this, jQuery.myBase, {
       init: function() {
           jQuery('#someEl').click( this.onClick );
       },

       onClick: function(e) {
           $this.bar();
       }
  }
}

【讨论】：

我应该提到我已经尝试过并且它有点工作，但如果事件在 jQuery.myBase 定义中怎么办？那仍然无法访问 $this。

【解决方案4】：

我想到的唯一方法是这样做，我不太喜欢并因此提出这个问题，方法如下：

jQuery.myBase = {
    bar: function() { ... }
}

jQuery.fn.myPlugin = function() {
   jQuery.extend( this, jQuery.myBase, {
       init: function() {
           var self = this;
           jQuery('#someEl').click( function(e) {
                this.onClick.apply( self, arguments );
           };
       },

       onClick: function(e) {
           // this works
           this.bar();
       }
  }
}

【讨论】：