Question

我正在使用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”，当然我无法通过自引用访问对象的“属性”。我该如何解决？

Answer 1

您可以将bind方法添加到其实例中：

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

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

如果您需要支持旧浏览器，可以使用先前链接的MDN文章中提供的polyfill，或者您可以使用jQuery $.proxy方法。

Answer 2

您可以使用jQUery的proxy方法：

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

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

Answer 3

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

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

通常，使用此方法比使用库提供的替代方法（如$ .bind，$ .proxy和_.bindAll）更高效（尽管在您当前的示例中我认为性能可比较）。请参阅this article on context binding。

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

3 个答案: