你应该知道的this

this（又名“context”）是每个函数内部的一个特殊关键字，它的值仅取决于函数的调用方式，而不是定义的方式/时间/地点。它不像其他变量那样受词法范围的影响（箭头函数除外，见下文）。这里有些例子：

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);
}

在这种情况下，我们将回调绑定到’sthis的值。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：

该对象将成为所有与 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();