Question

我试图在js类中加载JSON文件。加载的数据仅在函数内部可用。

 class MakePage {
     constructor() {
        var request=new XMLHttpRequest();
        request.open('GET','daten.json');
        request.responseType='json';
        request.send();
        request.onload=function() {
            this.daten=request.response;
            alert(this.daten[1].Name); // this works
        }       
    }
    test(name) {
        document.getElementById(name).innerHTML=this.daten[1].Name;
    }
}

page=new MakePage();
page.test("xyz"); //  TypeError: this.daten is undefined

如何将加载的数据存储在类成员中？

编辑：感谢您的回答。我尝试了self = this，bind（this）和arrow运算符，但始终遇到相同的TypeReference错误。

Answer 1

只需将您的回调函数替换为箭头函数即可。当您这样做时：

this.daten=request.response

this不是您所认为的;）使用箭头功能不会改变this的值，实际上它就是您所期望的。

class MakePage {
     constructor() {
        var request=new XMLHttpRequest();
        request.open('GET','daten.json');
        request.responseType='json';
        request.send();
        request.onload = () => {
            this.daten=request.response;
            alert(this.daten[1].Name); // this works
        }       
    }
    test(name) {
        document.getElementById(name).innerHTML=this.daten[1].Name;
    }
}

另一种方法是使用bind。

    request.onload=function() {
        this.daten=request.response;
        alert(this.daten[1].Name); // this works
    }       
    request.onload = request.onload.bind(this);

也不要忘记阅读该文档以了解其工作原理： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Answer 2

this中的request.onload=function()指向错误的范围。

要么使用request.onload = () => {}之类的箭头函数（推荐），要么通过在构造函数中的某处进行const self = this来保存对外部作用域的引用。

Answer 3

您也许应该尝试更换

request.onload=function() {
    this.daten=request.response;
    alert(this.daten[1].Name); // this works
}

通过箭头功能

request.onload=()=> {
    this.daten=request.response;
    alert(this.daten[1].Name); // this works
}

Answer 4

只需在回调函数中尝试对此进行引用：

 class MakePage {
     constructor() {
        var request=new XMLHttpRequest();
        request.open('GET','daten.json');
        request.responseType='json';
        request.send();
        self=this;
        request.onload=function() {
            self.daten=request.response;
            alert(self.daten[1].Name); // this works
        }       
    }
    test(name) {
        document.getElementById(name).innerHTML=this.daten[1].Name;
    }
 }

如何在javascript类中加载JSON文件

4 个答案: