Javascript XMLHttpRequest.onreadystatechange的上下文问题 出身背景

我正在使用每5秒发出一次请求，并希望在收到响应时打印我的姓名

为了做到这一点，我正在使用它，它允许我在收到答案时定义一个回调函数

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

问题是我第一次看到我的名字，但后来我再也看不到了。问题是这似乎是在不同的上下文中，因此this.sayMyName不存在，因为它不属于xhr对象

我试过的 为了解决这个问题，我尝试使用范围界定，但不幸的是，这仍然没有定义

密码 问题:

有没有一种方法可以修复此代码，而不必将上下文对象传递给setInterval函数？ 注 感谢你们中获得我的参考：P

将this.getCookInfo函数绑定到此

然后你可以简化你的代码

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

将this.getCookInfo.bindthis传递给setInterval-或者将this.getCookInfo=this.getCookInfo.bindthis添加到setInterval代码之前，并且，如果您使用的是类，您必须拥有一个现代浏览器。。。所以用xhr.onload代替20世纪的xhr.onreadystatechange:p那么你只需要检查xhr.status，而不是xhr.readyState那么闭包呢，我应该留下吗？我已经发布了一个答案-不，你不再需要IIFE了，因为这将是正确的答案，即使在您使用=>function的回调函数中，您似乎也没有xhr.send，如果没有它，请求将永远不会发送。顺便说一句，这是对Breaking Bad的引用，感谢您的帮助！

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");
    }
}