Javascript 如何在ES6 arrow函数调用的函数中使用'this'？

我理解（我认为）ES6中使用箭头函数，但我不确定为什么胖箭头函数调用的函数会将

设置为未定义

要在
handleAuthResult
中调用
this.setResult
，我必须做些什么？如果不需要，我不想使用旧的
函数（）{}.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();

谢谢

Edit:在我为这个被标记为重复的行为辩护时，我预期的行为在以下情况下会起作用，这就是为什么我希望不必在
上使用
bind
函数的原因。在ES6:
checkAuth
中，您应该使用

this.authenticate（this.handleAuthResult.bind（this））

这是因为当调用
回调（{value:true}）时此
绑定

this.authenticate(this.handleAuthRequest);

此
将丢失

你可以

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

或

总的来说，代码非常混乱，很多部分对我来说没有任何意义。具体来说，
回调（{value:true}）
非常奇怪。无论如何，如果您有更具体的问题，我很乐意提供帮助。
此
在
handleAuthResult
中是
未定义的
，因为
handleAuthResult
不是箭头函数，因此没有词法
此
。这是一个普通的原型函数（松散地称为“方法”），这意味着
这个
是由它的调用方式定义的

你这样称呼它：

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

不会将
此
设置为任何特定的值，因此
此
是
未定义的
（因为您处于严格模式）

要解决此问题，请将
此
传递到
验证
并使用它：

this.authenticate(this.handleAuthResult, this)

及

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

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

或为了完整性，使用另一个箭头函数：

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

关于使用另一个箭头功能的第三个选项，这一点很好。谢谢你的建议。我同意代码很混乱，但它实际上是谷歌提供的JavaScript快速启动的超级简化版本，我用自己的函数替换了它们的函数，这些函数接受回调：谢谢@TJ。我通常更喜欢使用另一个arrow函数，而不是依赖于
function.prototype.bind
将arrow函数直接放在类中更好地使用。然后它总是绑定到类的实例，我看到您在这里也附加了@naomik的解决方案。你的回答总体上非常简洁，解释了我为什么感到困惑。我已经接受了你的答案：）它在小提琴中工作的原因是它使用
React.createClass（）
而不是使用ES6类（扩展
React.Component
）
React.createClass（）
绑定所有方法，这在使用ES6类时不会发生。@bergi我不同意这与您链接的问题重复，因为它不是关于将方法绑定到ES6类实例的方法。特别是，在课堂上直接使用箭头函数，答案中没有提到。我相信这正是提问者想要的，尽管这个问题可能更为明确。另一种方法是将回调方法定义为箭头函数，当应用于类时，它总是绑定到它们所在的类。此问题专门询问箭头函数。
this.authenticate(this.handleAuthResult.bind(this))

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