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

Question

考虑以下 JavaScript class、属性和方法：

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 class 而不是 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)));
}

Answer 2

原因很简单。由于您在 jquery 元素的点击事件回调中访问 this，因此 this 指向发生事件的元素。

您可以更改代码并稍作更改以使其正常工作，请检查下面的 jsfiddle。

http://jsfiddle.net/satyagupta/efohyekq/

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

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

How to reference JavaScript class via "this" within jQuery?

javascript

jquery

reference

this

javascript-objects