Question

我知道jQuery不是为类似类的模型而设计的，但我真的能够扩展基类，因为它完全符合我的需求。

我刚开始做以下事情：

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

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

一切正常，我可以访问基本方法＆amp;属性通过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或插件本身。

Answer 1

您需要在适当的范围内引用它。

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();
       }
  }
}

Answer 2

我认为这样做的唯一方法，我不喜欢并因此提出问题，具体如下：

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();
       }
  }
}

Answer 3

另一种选择是遵循具有bind()功能的原型方法（实际上与我的其他答案相同，但以更清洁的方式），如this question中所指出的，例如：< / p>

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
       }
  }
}

Answer 4

根据评论

，它们看起来像addressing this in jQuery，应该是1.3.3的一部分

在使用类继承时，将原始文件放在jQuery事件处理程序等的对象中

4 个答案: