javascript - Javascript 类对象中的回调方法（XMLHttpRequest）

Question

我似乎收到以下错误：this.getPageHTML is not a function执行我的 Modal 类时。

constructor(trigger) {
    this.trigger = trigger;
  }

  /**
   * Show Modal
   * @param {Element} trigger The element that is triggering the Modal.
   */

  showModal(trigger = this.trigger) {
      switch (trigger.dataset.modaltype) {
        case "media":
          this.getPageHTML(trigger.dataset.url, (response) => {
            const htmlContent = response.getElementById("content");
            const modalContent = document
              .getElementById("modal")
              .querySelector(".modal-window__content");

            // Inject response into Modal content
            modalContent.insertAdjacentHTML("beforeend", htmlContent.innerHTML);

          });
          break;

        default:
          break;
      }
  }

  getPageHTML(url, callback) {
    if (!window.XMLHttpRequest) return;
    const xhr = new XMLHttpRequest();

    // Get the HTML
    xhr.open("GET", url);
    xhr.responseType = "document";
    xhr.onloadstart = this.requestStarted;
    xhr.onprogress = this.updateRequestProgress;
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        xhr.onload = function () {
          if (callback && typeof callback === "function") {
            callback(this.responseXML);
          }
        };
      }
    };
    xhr.send();
  }

不知道为什么我的 getPageHTML 函数是“不是函数”？

在我的主 js 文件中，我这样调用类：

modalTriggers.forEach((trigger) => {
  trigger.addEventListener("click", (e) => {
    let modal = new Modal(trigger);
    modal.showModal();

    e.preventDefault();
  });
});

可能是我在这里想念的非常明显的东西。我曾尝试将“this.getPageHTML”分配给像“this.getPageHTML = function(trigger.dataset.url, response) {...}”这样的匿名函数，但它似乎松散了“触发器”的含义。

标签： javascriptes6-class