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 и создать динамический селектор в веб-приложении.Код работает, когда он процедурный, т.е. не "ООП", но я должен сделать это таким образом.Класс 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);
      }
    };