代码之家 › 专栏 › 技术社区 › DEfusion

使用类继承时,在jquery事件处理程序等的对象中获取原始的this

this object class events jquery

DEfusion · 技术社区 · 15 年前

我知道jquery不是为使用类模型而设计的,但是我真的可以扩展一个基类,因为它完全符合我的需要。

我先做了以下几点:

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

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

一切都很好,我可以通过基本的方法和属性访问 this . 直到我尝试添加类似jquery事件处理程序(等)的东西,它将事件目标应用于 这 。

所以有以下几点:

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 )但这些都会遇到同样的问题。

那么,在所有这些之后,我如何才能得到原始的 这 在这种情况下?

更新: 事件处理程序(等)可以位于 jQuery.myBase 或者插件本身。

4 回复 | 直到 15 年前

Josh Stodola 15 年前

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

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

DEfusion 15 年前

我想做这件事的唯一方法,我不太喜欢这样问这个问题,就是:

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

Community Mr_and_Mrs_D 7 年前

另一种选择是遵循原型方法 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
       }
  }
}

DEfusion 15 年前

看起来他们是 addressing this in jQuery 根据评论,这应该是1.3.3的一部分