如何在ES6箭头函数调用的函数中使用`this`？(How to use `this` in a function called by an ES6 arrow function? [duplicate])

 
 
 这个问题在这里已有答案： 
 
 
 
  
 如何在回调中访问正确的`this`？ 8个答案 
 
 
 
 
 我理解（我认为）ES6中的箭头函数使用Lexical ，但我不确定为什么胖箭头函数调用的函数会this设置为未定义。 
 
 我需要做什么才能在handleAuthResult调用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/ 
 
 编辑：在我对此标记为重复的辩护中，我期望的行为在下面的小提琴中起作用，这就是为什么我期望this.handleAuthResult在ES6中的this.handleAuthResult上使用bind函数： https ： this.handleAuthResult / m9e7j4ds / 

 
 
This question already has an answer here:
 
 
 
  
 How to access the correct `this` inside a callback?  10 answers  
 
 
 
 
I understand (I think) that arrow functions in ES6 use Lexical this, but I'm not sure why a function called by a fat arrow function would have this set as undefined.
 
What do I have to do to be able to call this.setResult in handleAuthResult? I do not want to use the old function () {}.bind(this) if I don't need to.
 
"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();
 
Thanks! https://jsfiddle.net/vujev4dj/
 
Edit: in my defense of this being marked as duplicate, the behaviour I expected does work in the following fiddle, which is why I expected to not have to use the bind function on this.handleAuthResult in ES6: https://jsfiddle.net/m9e7j4ds/

原文：https://stackoverflow.com/questions/35825833