javascript - XMLHttpRequest.onreadystatechange 的上下文问题

Question

背景

我每 5 秒使用 XMLHttpRequest 发出一个请求我想在收到回复时打印我的名字。

为此，我使用 onreadystatechange这允许我在收到答案时定义回调函数。

问题

为了实现这一点，我使用了一个类。当我第一次启动类(class)时，我立即说出我的名字，然后使用 setTimeInterval 启动一个进程，每 5 秒发出一次请求并查看我的名字。

问题是我第一次看到自己的名字，但后来就再也没有看到过。问题是 this 似乎处于不同的上下文中，因此 this.sayMyName() 不存在，因为它不属于 xhr 对象。

我尝试了什么

为了解决这个问题，我尝试按照另一个 StackOverflow question 使用范围界定但不幸的是 this 仍未定义。

代码

class Cook {

    constructor() {
        // innitial call so we don't have to wait 
        //5 seconds until we see my name
        this.getCookInfo(); 

        setInterval(this.getCookInfo, 5000);
    }

    getCookInfo() {

        var xhr = new XMLHttpRequest(),
            method = "GET",
            url = "https://best.cooks.in.the.world.org/";

        xhr.open(method, url, true);

        //Call a function when the state changes.    
        xhr.onreadystatechange = (self => {
            return () => {
                if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200)
                    self.sayMyName();
            };
        })(this);
    }

    sayMyName() {
        console.log("Heisenberg");
    }
}

问题:

1. 有没有办法修复此代码，而不必将上下文对象传递给 setInterval 函数？

注意感谢那些得到我的引用的人 :P

Answer 1

将 this.getCookInfo 函数绑定(bind)到 this

然后你就可以集中简化你的代码

class Cook {

    constructor() {
        // innitial call so we don't have to wait 
        //5 seconds until we see my name
        this.getCookInfo(); 

        setInterval(this.getCookInfo.bind(this), 5000);
    }

    getCookInfo() {

        var xhr = new XMLHttpRequest(),
            method = "GET",
            url = "https://best.cooks.in.the.world.org/";

        xhr.open(method, url, true);

        //Call a function when the state changes.    
        // no need for self gymnastics any more
        // using onload, no need to test reasyState either
        xhr.onload = e => {
            if (xhr.status == 200)
                this.sayMyName();
        };
        // your code lacks one thing
        xhr.send();
    }

    sayMyName() {
        console.log("Heisenberg");
    }
}

另一种选择 -

class Cook {

    constructor() {
        this.getCookInfo(); 
    }

    getCookInfo() {
        var getit = () => {
            var xhr = new XMLHttpRequest(),
                method = "GET",
                url = "https://best.cooks.in.the.world.org/";

            xhr.open(method, url, true);

            //Call a function when the state changes.    
            xhr.onload = e => {
                if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200)
                    this.sayMyName();
            };
            xhr.send();
        };
        getit();
        setInterval(getit, 5000);
    }

    sayMyName() {
        console.log("Heisenberg");
    }
}

尽管如此，我只有 99% 确定这是正确的:p