如何在jQuery中通过"this"引用JavaScript类？

Question

请考虑以下JavaScript类,属性和方法:

function Foo() {
    this.data = 123;
}

Test.prototype.foo = function() {
    $("body").append($("<div>")
        .text("Hello World!")
        .click(function () {
            alert("Data: " + this.data);
        })
    );
}

var Bar = new Foo();
Bar.foo();

为什么data警报框中的属性未定义？如何引用"this",如同指向Foo类而不是jQuery div元素？

Answer 1

问题是this事件处理程序内部引用了处理程序所针对的元素; 你可以使用一个闭包变量来保存对象引用

Test.prototype.foo = function () {
    var self = this;
    $("body").append($("<div>")
        .text("Hello World!")
        .click(function () {
        alert("Data: " + self.data);
    }));
}

或者您可以使用$ .proxy()/Function.bind()等方法将自定义执行上下文传递给处理程序方法

Test.prototype.foo = function () {
    $("body").append($("<div>")
        .text("Hello World!")
        .click($.proxy(function () {
        alert("Data: " + this.data);
    }, this)));
}