如何在 ES6 箭头函数调用的函数中使用 `this`？ [复制]

Question

我理解（我认为）ES6 中的箭头函数使用Lexical this，但我不确定为什么一个由胖箭头函数调用的函数会将this 设置为未定义。

我需要做什么才能在handleAuthResult 中调用this.setResult？如果不需要，我不想使用旧的function () {}.bind(this)。

"use strict";

class Example {
    constructor() {
        this.checkAuth();
    }

    checkAuth() {
        document.write("Checking auth now. ");
        var iid = setInterval(() = > {
            if (true) { // Have to do some dumb check here
                clearInterval(iid);
                this.authenticate(this.handleAuthResult)
            }
        }, 500);
    }

    authenticate(callback) {
        callback({
            value: true
        });
    }

    handleAuthResult(result) {
        document.write(`The result is ${result.value}.`);
        this.setResult(result, this.loadThePage)
        // ^ `this` is undefined here. How can I ever set the result?
    }

    // Another asynchronous thing
    setResult(result, callback) {
        callback();
    }

    loadThePage() {
        document.write("The code never gets here, but the page should load now. ");
    }
};
var example = new Example();

谢谢！ https://jsfiddle.net/vujev4dj/

编辑： 在我为这被标记为重复的辩护中，我期望的行为确实在下面的小提琴中起作用，这就是我期望不必使用的原因ES6 中this.handleAuthResult 上的bind 函数：https://jsfiddle.net/m9e7j4ds/

Answer 1

当你打电话时

this.authenticate(this.handleAuthRequest);

this 丢失了

你可以的

this.authenticate(this.handleAuthRequest.bind(this));

或者

this.authenticate(() => this.handleAuthRequest());

总体而言，代码非常混乱，而且很多部分对我来说没有任何意义。特别是callback({value: true}) 很奇怪。无论如何，如果您有更具体的问题，我很乐意提供帮助。

Answer 2

this 在handleAuthResult 中是undefined，因为handleAuthResult 不是箭头函数，因此没有词法this。它是一个普通的原型函数（大致称为“方法”），这意味着this 是由它的调用方式定义的。

你的称呼方式：

authenticate(callback) {
    callback({
        value: true
    });
}

没有将this 设置为任何特定的值，因此this 是undefined（因为您处于严格模式）。

要修复它，请将this 传递给authenticate 并使用它：

this.authenticate(this.handleAuthResult, this)

和

authenticate(callback, thisArg) {
    callback.call(thisArg, {
        value: true
    });
}

或使用Function#bind 创建一个函数，当调用该函数时，将使用正确的this 调用handleAuthResult：

this.authenticate(this.handleAuthResult.bind(this))

为了完整起见，naomik points out a third option which is quite elegant：使用另一个箭头函数：

this.authenticate(() => this.handleAuthRequest())

Answer 3

在checkAuth，你应该使用

this.authenticate(this.handleAuthResult.bind(this))

那是因为调用callback({value: true});时没有绑定this