Question

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

我需要做些什么才能在this.setResult中致电handleAuthResult？如果我不需要，我不想使用旧的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中bind上的this.handleAuthResult函数：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

在checkAuth中

，您应该使用

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

那是因为在致电callback({value: true});时没有this绑定

Answer 3

this中的undefined为handleAuthResult，因为handleAuthResult不是箭头功能，因此不具有词汇this。它是一个普通的原型函数（松散地，＆＃34;方法＆＃34;），这意味着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创建一个函数，在调用时，会使用正确的handleAuthResult调用this：

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

或完整性，naomik points out a third option which is quite elegant：使用其他箭头功能：

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

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

3 个答案: