您应该了解的有关 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 文档 。

如何引用正确的 this

使用 箭头函数

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

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

不要使用 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 会在内部处理该问题。

设置回调的 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 的 $.ajax 方法 ^[docs] 描述了一个名为 context 的选项：

This object will be made the context of all Ajax-related callbacks.

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

此问题的另一个常见表现是将对象方法用作回调/事件处理程序。函数是 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();

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

1. 您可以使用 bind () 函数。
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);
  });
}

这一切都在调用方法的“魔法”语法中：

object.property();

当您从对象获取属性并一次性调用它时，该对象将成为该方法的上下文。如果您调用相同的方法，但在不同的步骤中，上下文将是全局范围（窗口）：

var f = object.property;
f();

当您获得方法的引用时，它不再附加到对象。它只是对普通函数的引用。当您获取引用以用作回调时，也会发生同样的情况：

this.saveNextLevelData(this.setAll);

这就是您将上下文绑定到函数的地方：

this.saveNextLevelData(this.setAll.bind(this));

如果您使用 jQuery，则应改用 $.proxy 方法，因为并非所有浏览器都支持 bind ：

this.saveNextLevelData($.proxy(this.setAll, this));