'this.function' 不是函数 - OO JS

Question

我有一个模态对象，它具有各种功能作为其属性，但是当我单击打开模态时，我收到错误 this.openModal is not a function。我已经尝试过调试，但只要它达到我希望它运行的功能，它就会崩溃。我怀疑这可能是“this”绑定的问题，但我不确定问题出在哪里。我所有的 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 的替代方法，您可以移动：

var thisModal = this;

从handleClick方法到构造函数。

此外，为构造函数命名以大写字母开头是惯例，这样更容易看出它们是构造函数。

var Modal = function () {

  var thisModal = this;

  // Open Modal
  this.openModal = function(button) {
    console.log('openModal called on ' + button.tagName);
  }

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

  // Handle Button Click
  this.handleClick = function(event) {
    thisModal.openModal(event.target);
  }
}

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

<div>Click <span>anywhere</span></div>

Answer 2

您需要先将函数绑定到对象，然后再将其作为事件侦听器：

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

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

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