避免 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
});

以下2种方式都不理想

$(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 元素而与您的自定义对象无关。