Js - onreadystatechange XMLHttpRequest Uncaught 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);
      }
    };