如何在回调中访问正确的“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

以下是在子上下文中访问父上下文的几种方法 -

1. 您可以使用绑定() 函数。
2. 将对 context/this 的引用存储在另一个变量中（请参阅下面的示例）。
3. 使用 ES6 箭头 功能。
4. 更改代码、功能设计和架构 - 为此，您应该掌握设计模式 在 JavaScript 中。

1.使用bind()函数

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', ( function () {
        alert(this.data);
    }).bind(this) );
}
// Mock transport object
var transport = {
    on: function(event, callback) {
        setTimeout(callback, 1000);
    }
};
// called as
var obj = new MyConstructor('foo', transport);

如果您使用的是 Underscore.js - http://underscorejs.org/#bind

transport.on('data', _.bind(function () {
    alert(this.data);
}, this));

2.将对 context/this 的引用存储在另一个变量中

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

3.箭头函数

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

Answer 2

关于此内容您应该了解

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`

要了解有关此的更多信息，请查看MDN 文档。

---

如何引用正确的this

使用箭头函数

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

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

不要使用这个

您实际上不想特别访问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 在内部处理这个问题。

设置回调的 this - 第 2 部分

一些接受回调的函数/方法也接受回调的 this 应该引用的值。这与您自己绑定它基本上相同，但是函数/方法会为您完成它。 Array#map < em>^[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 的 $.ajax 方法 ^[docs] 描述了一个名为 context 的选项：

---

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

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

考虑以下示例：

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

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

函数this.method被指定为点击事件处理程序，但如果点击document.body，记录的值将是未定义，因为在事件处理程序中，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();