您应该了解的内容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`
要了解有关 的更多信息，请查看 MDN 文档。this
如何正确引用this
ECMAScript 6 引入了箭头函数，可以将其视为 lambda 函数。他们没有自己的绑定。相反，在作用域中查找，就像普通变量一样。这意味着您不必拨打 .这不是他们唯一的特殊行为，请参阅MDN文档以获取更多信息。thisthis.bind
function MyConstructor(data, transport) {
this.data = data;
transport.on('data', () => alert(this.data));
}
不要使用this
您实际上不想特别访问，而是它所引用的对象。这就是为什么一个简单的解决方案是简单地创建一个也引用该对象的新变量。该变量可以具有任何名称，但常见的名称是 和 。thisselfthat
function MyConstructor(data, transport) {
this.data = data;
var self = this;
transport.on('data', function() {
alert(self.data);
});
}
由于 是一个普通变量，因此它遵循词法作用域规则，并且可以在回调内部访问。这还具有可以访问回调本身的值的优点。selfthis
显式设置回调 - 第 1 部分this
看起来您可能无法控制 的值，因为它的值是自动设置的，但实际上并非如此。this
每个函数都有方法 .bind [docs]，它返回一个绑定到值的新函数。该函数的行为与您调用的行为完全相同，只是由您设置。无论如何或何时调用该函数，都将始终引用传递的值。this.bindthisthis
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);
}
在本例中，我们将回调绑定到 的值 。thisMyConstructorthis
注意：当为 jQuery 绑定上下文时，请改用 jQuery.proxy [docs]。这样做的原因是，在解除事件回调时，不需要存储对函数的引用。jQuery在内部处理。
回调集 - 第 2 部分this
一些接受回调的函数/方法也接受回调应该引用的值。这基本上与自己绑定它相同，但函数/方法会为您完成。Array#map [docs]就是这样一种方法。它的特点是：this
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
注意：是否可以传递 的值通常在该函数/方法的文档中提到。例如，jQuery 的 $.ajax 方法 [docs] 描述了一个名为 ：thiscontext
此对象将成为所有与 Ajax 相关的回调的上下文。
常见问题：使用对象方法作为回调/事件处理程序
此问题的另一个常见表现形式是将对象方法用作回调/事件处理程序。函数在JavaScript中是一等公民，术语“方法”只是作为对象属性值的函数的口语术语。但该函数没有指向其“包含”对象的特定链接。
请考虑以下示例：
function Foo() {
this.data = 42,
document.body.onclick = this.method;
}
Foo.prototype.method = function() {
console.log(this.data);
};
该函数被分配为单击事件处理程序，但如果单击 ，则记录的值将为 ，因为在事件处理程序内部，引用的 是 ，而不是 的实例。
正如在开头已经提到的，所指的取决于函数的调用方式，而不是如何定义函数。
如果代码如下所示，则函数没有对对象的隐式引用可能会更明显：this.methoddocument.bodyundefinedthisdocument.bodyFoothis
function method() {
console.log(this.data);
}
function Foo() {
this.data = 42,
document.body.onclick = this.method;
}
Foo.prototype.method = method;
解决方案与上面提到的相同：如果可用，则使用 显式绑定到特定值.bindthis
document.body.onclick = this.method.bind(this);
或者通过使用匿名函数作为回调/事件处理程序并将对象（）分配给另一个变量，将函数显式调用为对象的“方法”：this
var self = this;
document.body.onclick = function() {
self.method();
};
或使用箭头函数：
document.body.onclick = () => this.method();
