您应该了解的内容 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 设置
一些接受回调的函数/方法也接受回调 this 应该引用的值。这基本上与自己绑定相同，但函数/方法会为您完成绑定。Array 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 单击了，则记录的值将是 un定义 ，因为在事件处理程序内部， this 指的是 document.body ，而不是的实例 Foo .
正如开头提到的， this 引用取决于函数如何被 调用 ，而不是如何 defined .
如果代码如下所示，则可能更明显的是该函数没有对该对象的隐式引用：
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();
