javascript - 如何在回调中访问正确的“this”？

Question

我有一个构造函数注册一个事件处理程序：

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', function () {
        alert(this.data);
    });
}

// Mock transport object
var transport = {
    on: function(event, callback) {
        setTimeout(callback, 1000);
    }
};

// called as
var obj = new MyConstructor('foo', transport);

但是，我无法在回调内部访问已创建对象的 data属性。看起来 this并不引用创建的对象，而是引用另一个对象。

我还尝试使用对象方法而不是匿名函数：

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', this.alert);
}

MyConstructor.prototype.alert = function() {
    alert(this.name);
};

但是也有同样的问题

如何访问正确的对象？

Answer 1

您应该了解的this

this（又称“上下文”）是每个函数中的特殊关键字，其值仅取决于函数的调用方式，而不取决于函数的定义方式/定义时间/位置。它不受其他变量之类的词法作用域的影响（箭头函数除外，请参见下文）。这里有些例子：

function foo() {
    console.log(this);
}

// normal function call
foo(); // `this` will refer to `window`

// as object method
var obj = {bar: foo};
obj.bar(); // `this` will refer to `obj`

// as constructor function
new foo(); // `this` will refer to an object that inherits from `foo.prototype`

要了解有关 this的更多信息，请查看 MDN documentation。



如何引用正确的 this

不要使用 this

实际上，您实际上并不想访问 this，而是要访问它引用的对象。这就是为什么一个简单的解决方案是简单地创建一个也引用该对象的新变量。该变量可以具有任何名称，但常见的名称是 self和 that。

function MyConstructor(data, transport) {
    this.data = data;
    var self = this;
    transport.on('data', function() {
        alert(self.data);
    });
}

由于 self是普通变量，因此它遵循词汇范围规则，并且可以在回调内部访问。这还有一个优点，就是您可以访问回调本身的 this值。

显式设置回调的 this-第1部分

您可能无法控制 this的值，因为它的值是自动设置的，但实际上并非如此。

每个函数都有方法 .bind ^[docs]，该方法返回一个新函数，该函数将 this绑定到一个值。该函数的行为与您调用 .bind的行为完全相同，只是您设置了 this。无论如何或何时调用该函数， this始终将引用传递的值。

function MyConstructor(data, transport) {
    this.data = data;
    var boundFunction = (function() { // parenthesis are not necessary
        alert(this.data);             // but might improve readability
    }).bind(this); // <- here we are calling `.bind()` 
    transport.on('data', boundFunction);
}

在这种情况下，我们将回调的 this绑定到 MyConstructor的 this的值。

注意：当为jQuery绑定上下文时，请使用 jQuery.proxy ^[docs]。这样做的原因是，使您在取消绑定事件回调时不需要存储对该函数的引用。 jQuery在内部进行处理。

ECMAScript 6：使用 arrow functions

ECMAScript 6引入了箭头功能，可以将其视为lambda函数。他们没有自己的 this绑定。而是像普通变量一样在范围内查找 this。这意味着您不必致电 .bind。这不是它们唯一的特殊行为，请参考MDN文档以获取更多信息。

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', () => alert(this.data));
}

设置回调的 this-第2部分

某些接受回调的函数/方法也接受回调的 this应引用的值。这基本上与您自己绑定它相同，但是函数/方法可以为您完成它。 Array#map ^[docs]是这样的方法。它的签名是：

array.map(callback[, thisArg])

第一个参数是回调，第二个参数是应引用的值 this。这是一个人为的示例：

var arr = [1, 2, 3];
var obj = {multiplier: 42};

var new_arr = arr.map(function(v) {
    return v * this.multiplier;
}, obj); // <- here we are passing `obj` as second argument

注意：该函数/方法的文档中通常提到是否可以传递 this的值。例如， jQuery's $.ajax method ^[docs]描述了一个名为 context的选项：


  该对象将成为所有与Ajax相关的回调的上下文。




常见问题：使用对象方法作为回调/事件处理程序

此问题的另一个常见表现是将对象方法用作回调/事件处理程序。函数是JavaScript中的一等公民，术语“方法”仅是一个俗称的函数，即对象属性的值。但是该函数没有指向其“包含”对象的特定链接。

考虑以下示例：

function Foo() {
    this.data = 42,
    document.body.onclick = this.method;
}

Foo.prototype.method = function() {
    console.log(this.data);
};

函数 this.method被分配为单击事件处理程序，但是如果单击 document.body，则记录的值将为 undefined，因为在事件处理程序中， this引用了 document.body，而不是实例。 Foo。
如开头所述， this所指的取决于函数的调用方式，而不是函数的定义方式。
如果代码如下所示，则该函数没有对该对象的隐式引用可能会更加明显：

function method() {
    console.log(this.data);
}


function Foo() {
    this.data = 42,
    document.body.onclick = this.method;
}

Foo.prototype.method = method;

解决方案与上述相同：如果可用，请使用 .bind将 this显式绑定到特定值

document.body.onclick = this.method.bind(this);

或通过使用匿名函数作为回调/事件处理程序并将对象（ this）分配给另一个变量来显式调用该函数作为对象的“方法”：

var self = this;
document.body.onclick = function() {
    self.method();
};

或使用箭头功能：

document.body.onclick = () => this.method();