在jQuery事件中控制“ this”的值

我使用jQuery创建了一个“控件”，并使用jQuery.extend来帮助使其尽可能地面向对象。

在控件初始化期间，我连接了各种单击事件，如下所示

jQuery('#available input', 
            this.controlDiv).bind('click', this, this.availableCategoryClick);

注意，我正在将“ this”作为bind方法中的数据参数。我这样做是为了获得附加到控件实例的数据，而不是从激发click事件的元素中获取数据。

这很好用，但是我怀疑有更好的方法

过去曾经使用过Prototype，但我记得绑定语法使您可以控制事件中'this'的值。

jQuery的方式是什么？

您可以将其jQuery.proxy()与匿名函数一起使用，只是有点尴尬地认为“上下文”是第二个参数。

 $("#button").click($.proxy(function () {
     //use original 'this'
 },this));

我喜欢您的方式，实际上使用了类似的构造：

$('#available_input').bind('click', {self:this}, this.onClick);

以及this.onClick的第一行：

var self = event.data.self;

我喜欢这种方式，因为这样您既可以单击元素（这样）又可以将“ this”对象作为自身，而不必使用闭包。

jQuery具有 jQuery.proxy方法（从1.4开始可用）。

例：

var Foo = {
  name: "foo",

  test: function() {
    alert(this.name)
  }
}

$("#test").click($.proxy(Foo.test, Foo))
// "foo" alerted

我认为jQuery不具有内置功能。但是您可以使用如下的帮助程序构造：

Function.prototype.createDelegate = function(scope) {
    var fn = this;
    return function() {
        // Forward to the original function using 'scope' as 'this'.
        return fn.apply(scope, arguments);
    }
}

// Then:
$(...).bind(..., obj.method.createDelegate(obj));

这样，您可以使用createDelegate（）创建动态的“包装函数”，该包装函数以给定对象作为“ this”范围调用该方法。

例：

function foo() {
    alert(this);
}

var myfoo = foo.createDelegate("foobar");
myfoo(); // calls foo() with this = "foobar"

HTML 5兼容的浏览器提供一个绑定方法上Function.prototype，其是，可能是最清洁的语法，而不是框架依赖性的，虽然它不内置IE IE为止9.（有一个填充工具为没有它的浏览器，虽然。）

根据您的示例，可以这样使用它：

jQuery('#available input', 
        this.controlDiv).bind('click', this.availableCategoryClick.bind(this));

（旁注：bind此语句的第一部分是jQuery的一部分，与无关Function.prototype.bind）

或使用稍微简洁和最新的jQuery（并消除两种不同类型binds的混淆）：

$('#available input', this.controlDiv).click(this.availableCategoryClick.bind(this));

您可以使用如下所示的javascript bind方法：

var coolFunction = function(){
  // here whatever involving this
     alert(this.coolValue);
}

var object = {coolValue: "bla"};


$("#bla").bind('click', coolFunction.bind(object));

jQuery不支持绑定，首选方式是使用函数。

因为在Javascript中，this.availableCategoryClick并不意味着对该对象调用availableCategoryClick函数，所以jQuery建议使用以下首选语法：

var self = this;
jQuery('#available input', self.controlDiv).bind('click', function(event)
{
   self.availableCategoryClick(event);
});

Java语言中的OO概念很难理解，函数式编程通常更容易理解。

看到函数会改变范围，最常见的方法是使用手动操作var self = this。

var self = this

$('.some_selector').each(function(){
  // refer to 'self' here
}