你应该知道的关于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
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'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();