Question

我使用jQuery创建了一个'control'，并使用jQuery.extend来帮助它尽可能地成为OO。

在我的控制初始化期间，我连接各种点击事件，如此

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

请注意，我将'this'作为bind方法中的data参数。我这样做是为了让我可以获取附加到控件实例的数据而不是触发click事件的元素。

这完美无缺，但我怀疑有更好的方法

过去使用过Prototype，我记得一个绑定语法，它允许你控制'this'在事件中的值。

什么是jQuery方式？

Answer 1

您可以将jQuery.proxy()与匿名函数一起使用，只是有点尴尬，'context'是第二个参数。

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

Answer 2

我喜欢你的方式，实际上使用类似的结构：

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

和this.onClick的第一行：

var self = event.data.self;

我喜欢这种方式，因为这样你就可以点击元素（如此）和“this”对象作为self，而不必使用闭包。

Answer 3

jQuery具有jQuery.proxy方法（自1.4起可用）。

示例：

var Foo = {
  name: "foo",

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

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

Answer 4

我认为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"

Answer 5

符合HTML 5标准的浏览器在Function.prototype上提供bind method，这可能是最干净的语法，并且不依赖于框架，但是在IE 9之前它没有内置到IE中。 polyfill适用于没有它的浏览器。）

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

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

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

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

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

Answer 6

您可以使用这样的javascript bind方法：

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

var object = {coolValue: "bla"};


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

Answer 7

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

因为在Javascript中，this.availableCategoryClick并不意味着调用此对象上的availableCategoryClick函数，jQuery建议使用这个首选语法：

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

Javascript中的OO概念很难理解，功能编程通常更容易，更易读。

Answer 8

看到函数改变范围，最常见的方法是手动执行，例如var self = this。

var self = this

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

在jQuery事件中控制'this'的值

8 个答案: