避免 var _this = this;编写 jQuery 事件处理程序时

Question

这不是一个非常重要的问题，但我们开始了..

如何避免在 jQuery 事件处理程序中使用 var _this = this ？ 即我不喜欢这样做：

var _this = this;
$(el).click(function (event) {
  //use _this to access the object and $(this) to access dom element
});

以下两种方式并不理想

$(el).click($.proxy(function (event) {
  //lost access to the correct dom element, i.e. event.target is not good enough (see http://jsfiddle.net/ne3n3/1/)
}, this));

$(el).click({_this: this}, function (event) {
  //have access to $(this) and event.data._this, but it seems too verbose
})

理想情况下我想做类似的事情

$(el).click(function (event) {
  this.method(); // this is accessing the object
  event.realTarget; // this is accessing the dom element
}, this); // <= notice this

Answer 1

http://api.jquery.com/event.currentTarget/ 说：

“此属性通常等于函数的 this。”

http://jsfiddle.net/ne3n3/2/

Answer 2

我不完全确定我理解正确，但是如果您想要的是对创建回调函数时所在函数的引用，您可以这样做（尽管这并不能完全节省您的时间）任何打字）：

$(el).click(function(parent) {
    return function() {
        // Use parent instead of _this
    }
}(this))

Answer 3

您不能将变量 this 同时分配给对象和 DOM 元素。我的建议是将对象分配给与 this 不同的变量。

访问对象和 DOM 元素的最佳方法如下：

$(el).click($.proxy(function (event) {
  // can reference DOM element with this i.e. $(this)
  // can reference your object with the variable myObject
  //     i.e. $(this).val(myObject.data);
}, myObject));

或者可能像这样：

$(el).click({myObject: this}, function (event) {
  //have access to $(this) and event.data.myObject, but it seems too verbose
});

在点击事件处理函数中使用除 this 之外的变量也会使您的代码更清晰，因为大多数人会期望 this 引用 DOM 元素，并且与您的自定义对象无关。