将JQuery事件分配给自定义对象方法

Assigning JQuery events to custom object methods

本文关键字：自定义 对象 方法 分配 JQuery 事件      更新时间：2023-09-26

我正在使用JQuery（Mobile）创建一个应用程序，但JQuery事件的结构存在问题。我定义了一个类似的伪"类"：

MyClass = function()
{
    this.property = initvalue;
    this.foo = function()
    {
        alert("That's my property = " + this.property);
    }
}

然后我定义了一个基于MyClass的对象：

var obj1 = new MyClass();

当我使用obj1.foo（）作为回调函数来通知事件时，问题就来了，例如：

$(element).click(obj1.foo);

或

$(element).load(URL, obj1.foo);

当执行foo（）时，"this"指的是元素，而不是对象"obj1"，当然我不能用自引用访问对象的"property"。我该怎么修？

您可以使用jQUery的proxy方法：

$(element).load(URL, $.proxy(obj1.foo, obj1));

这将为您的方法分配obj1上下文。

您可以将方法绑定到其实例：

$(element).click(obj1.foo.bind(obj1));

.bind()方法返回一个函数，所以您仍然将一个函数传递给jQuery方法，但该函数的上下文将绑定到您传递给.bind()的任何函数。

如果需要支持较旧的浏览器，可以使用前面链接到的MDN文章中给出的polyfill，也可以使用jQuery $.proxy方法。

您可以将click事件绑定到一个匿名函数，该函数在对象的上下文中引用this的缓存版本。

var myClass = this;
$(element).click(function () { myClass.foo(); });

通常，使用此方法比库提供的替代方法（如$.bind、$.proxy和_.bindAll）更具性能（尽管在您当前的示例中，我认为性能相当）。请参阅这篇关于上下文绑定的文章。

相关文章：