Js - onreadystatechange上的相同类调用方法XMLHttpRequest未捕获的ReferenceError：函数未定义

Question

export class PizzaController{

    static loadData(){
        var xhttp = new XMLHttpRequest();

        xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            dynamicSelect(xhttp.responseXML);
          }
        };     
        xhttp.open("GET", "js/data/pizzadata.xml", true);
        xhttp.send();
    }

    dynamicSelect(xmlDoc){
        var doughTypes = [];

        let selects = document.getElementById("selects");

        let doughSelect = document.createElement("select");
        doughSelect.setAttribute("id","dough");
        selects.appendChild(doughSelect);

        let typeSelect = document.createElement("select");
        typeSelect.setAttribute("id","type");
        selects.appendChild(typeSelect);

        let toppingSelect = document.createElement("select");
        toppingSelect.setAttribute("id","topping");
        selects.appendChild(toppingSelect);    


        let x = xmlDoc.getElementsByTagName('DOUGH');
    }
}

我试图从XML文件中提取数据并在webapp上创建动态选择器。代码在程序上工作，即不是“OOP”，但我必须这样做。 PizzaController类由init.js调用，我只调用loadData。当我尝试控制日志时它显示结果，因此调用工作因此这必须是唯一的问题。我一直收到这个错误

Uncaught ReferenceError: dynamicSelect is not defined
    at XMLHttpRequest.xhttp.onreadystatechange 

Answer 1

dynamicSelect是PizzaController实例的属性，而不是当前范围中的变量。

使用箭头函数捕获PizzaController的当前实例，然后使用this访问其属性。

    xhttp.onreadystatechange = () => {
      if (this.readyState == 4 && this.status == 200) {
        this.dynamicSelect(xhttp.responseXML);
      }
    };