javascript - 'this.function' 不是一个函数 - OO JS

Question

我有一个模态对象，其属性具有各种函数，但是当我单击打开模态时，我收到错误 this.openModal 不是函数。我尝试过调试，但一旦它达到我希望它运行的功能，它就会崩溃。我怀疑这可能是“this”绑定(bind)的问题，但我不确定问题出在哪里。我的所有 JS 都在下面，一个函数链接到另一个函数上，这样更容易看到整个对象。

var modal = function () {

  // Modal Close Listeners
  this.closeModalListen = function(button) {
    var modalFooter = button.parentElement;
    var modalContent = modalFooter.parentElement;
    var modalElement = modalContent.parentElement;
    var backdrop = document.getElementById("modal-backdrop");
    this.closeModal(modalElement, backdrop);
  }

  // Open Modal
  this.openModal = function(button) {
    var button = button;
    var modal = button.getAttribute("data-modal");
    var modalElement = document.getElementById(modal);
    var backdrop = document.createElement('div');
    backdrop.id="modal-backdrop";
    backdrop.classList.add("modal-backdrop");
    document.body.appendChild(backdrop);
    var backdrop = document.getElementById("modal-backdrop");
    backdrop.className += " modal-open";
    modalElement.className += " modal-open";
  }

  // Close Modal
  this.closeModal = function(modalElement, backdrop) {
    modalElement.className = modalElement.className.replace(/\bmodal-open\b/, '');
    backdrop.className = backdrop.className.replace(/\bmodal-open\b/, '');
  }

  // Initialise Function
  this.init = function () {
    // Create Events for creating the modals
    if (document.addEventListener) {
        document.addEventListener("click", this.handleClick, false);
    }
    else if (document.attachEvent) {
        document.attachEvent("onclick", this.handleClick);
    }
  }

  // Handle Button Click
  this.handleClick = function(event) {
    var thisModal = this;
      event = event || window.event;
      event.target = event.target || event.srcElement;
      var element = event.target;
      while (element) {
          if (element.nodeName === "BUTTON" && /akela/.test(element.className)) {
              thisModal.openModal(element);
              break;
          } else if (element.nodeName === "BUTTON" && /close/.test(element.className)) {
              thisModal.closeModalListen(element);
              break;
          } else if (element.nodeName === "DIV" && /close/.test(element.className)) {
              thisModal.closeModalListen(element);
              break;
          }
          element = element.parentNode;
      }
  }
}

// Initalise Modal Engine
var akelaModel = new modal();
akelaModel.init();

我希望用纯js而不是jquery来解决这个问题。

Answer 1

您需要先将函数绑定(bind)到对象，然后再将其作为事件监听器:

document.addEventListener("click", this.handleClick.bind(this), false);

document.attachEvent("onclick", this.handleClick.bind(this));

否则，它将与其原始对象分离，并且不具有预期的 this。