Javascript回调丢失'this'

Question

我有一个发行者，我在这个“对象”中丢失了“这个”。下面一段 javascript 的输出给了我“some-id”，然后是“undefined”。当我在回调函数中使用“this”时，范围超出了对象，它不能再使用“this”了。如何让回调使用“this”或至少可以访问该对象？

由于我将制作多个对象，因此我将无法创建类似“静态”的存储。请帮助这个 javascript n00b ;-)

这是我的测试代码，您可以使用它来重现我的问题。我想要的是 CheckBox.doSomething() 返回 this.id 的值，该值应该与此测试用例的 some-id 匹配。

function CheckBox(input_id) {
    this.id = input_id;
    this.doSomething();
    $('#some-element').click(this.doSomething);
}

Checkbox.prototype.doSomething = function() {
    alert(this.input_id);
}

var some_box = new CheckBox('some-id');
some_box.doSomething();
$('#some-element').click();

编辑：我什至无法按照我的意愿让它工作：

function CheckBox2(input_id) {
    this.id = input_id;
    alert(this.id);
}

CheckBox2.prototype.doSomething = function() {
    alert(this.input_id);
}
var some_box = new CheckBox2('some-id');
some_box.doSomething();

Answer 1

你的问题在于这一行：$('#some-element').click(this.doSomething);

为什么这是个问题

JavaScript 方法对应该分配给 this 的对象一无所知，它是在显式（使用 myFunction.call(obj)）或隐式调用（使用 obj.myFunction() 调用）时设置的。

例如：

var x = {
    logThis: function () {
        console.log(this);
    }
};

x.logThis(); // logs x
x.logThis.call(y); // logs y

var func = x.logThis;
func(); // logs window: the fallback for when no value is given for `this`

在您的情况下，您将 this.doSomething 传递给 jQuery，然后使用被单击的元素作为 this 的值显式调用它。正在发生的事情是（稍微复杂一点的）这个：

var callback = this.doSomething;
callback.call(anElement, anEvent);

解决办法

您需要确保使用正确的 this 值调用 doSomething。您可以通过将其包装在另一个函数中来做到这一点：

var cb = this;
$('#some-element').click(function() {
    return cb.doSomething();
});

jQuery 提供了一个proxy 函数让您更简单地做到这一点：

$('#some-element').click(jQuery.proxy(this.doSomething, this));

Answer 2

function CheckBox(input_id) {
    this.id = input_id;
    this.doSomething = $.proxy( this.doSomething, this );
    $('#some-element').click(this.doSomething);
}

这个的“javascript 等价物”是Function#bind，但这并不是在每个浏览器中都可用，因为看起来你使用的是 jQuery，所以我使用的是 jQuery 等价物$.proxy

Answer 3

其他人已经解释了问题的原因以及如何使用 jQuery 修复它。剩下的就是如何使用标准 JavaScript 修复它。而不是...

$('#some-element').click(this.doSomething);

...你写：

document.getElementById('some-element').addEventListener('click', this.doSomething.bind(this));

这会改变this 在doSomething 中的上下文。您也可以使用匿名函数来做到这一点 - 而不是 ...

$('#some-element').click(function(event) {
    console.log(this);
});

...你写：

document.getElementById('#some-element').addEventListener('click', (function(event) {
    console.log(this);
}).bind(this));

这在有很多回调的项目中对我非常有用，例如在 Node.js 中（您不必关心过时的浏览器）。

编辑：getElementById() 和 addEventListener() 而不是 $(...).click(...)。