74

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

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

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

请注意，我将“this”作为绑定方法中的数据参数。我这样做是为了获取附加到控件实例的数据，而不是从触发点击事件的元素中获取数据。

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

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

什么是jQuery方式？

4

8 回答 8

104

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

 $("#button").click($.proxy(function () {
     //use original 'this'
 },this));
于 2011-04-20T07:53:54.867 回答
39

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

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

和 this.onClick 的第一行：

var self = event.data.self;

我喜欢这种方式，因为这样您就可以同时单击元素（作为 this）和作为 self 的“this”对象，而无需使用闭包。

于 2009-12-30T22:50:23.910 回答
33

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

例子：

var Foo = {
  name: "foo",

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

$("#test").click($.proxy(Foo.test, Foo))
// "foo" alerted
于 2011-02-14T11:32:46.110 回答
21

我不认为 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"
于 2009-02-06T13:59:10.600 回答
5

兼容 HTML 5 的浏览器提供了一种bind 方法，Function.prototype它可能是最简洁的语法并且不依赖于框架，尽管它直到 IE 9 才内置到 IE 中。（不过，对于没有它的浏览器，有一个polyfill。）

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

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

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

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

$('#available input', this.controlDiv).click(this.availableCategoryClick.bind(this));
于 2014-04-24T18:24:32.757 回答
4

您可以像这样使用 javascript绑定方法：

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

var object = {coolValue: "bla"};


$("#bla").bind('click', coolFunction.bind(object));
于 2013-03-08T19:20:27.840 回答
2

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

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

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

Javascript 中的 OO 概念很难理解，函数式编程通常更容易且更具可读性。

于 2009-02-06T14:16:13.170 回答
1

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

var self = this

$('.some_selector').each(function(){
  // refer to 'self' here
}
于 2009-02-06T14:38:03.690 回答