如何在 jQuery 中通过“this”引用 JavaScript 类？答案

【问题标题】：How to reference JavaScript class via "this" within jQuery?如何在 jQuery 中通过“this”引用 JavaScript 类？
【发布时间】：2015-03-05 04:53:21
【问题描述】：

考虑以下 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 元素？

【问题讨论】：

标签： javascript jquery reference this javascript-objects

【解决方案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)));
}

【讨论】：

【解决方案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);
        })
    );
}

【讨论】：