'this.function' ist keine Funktion - OO JS

Question

Ich habe ein modales Objekt, das verschiedene Funktionen als Eigenschaften hat, aber wenn ich ein Modal öffne, bekomme ich den Fehler this.openModal ist keine Funktion. Ich habe das Debuggen versucht, aber es fällt einfach um, sobald es die Funktion trifft, die ich ausführen möchte. Ich vermute, dass es ein Problem mit der Bindung "this" sein könnte, aber ich bin mir nicht sicher, wo das Problem liegt. All meine JS ist unten, eine Funktion Art von Ketten auf eine andere, so dass es einfacher ist, das ganze Objekt zu sehen.

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(); 

Ich suche, dies mit reinem js und no jquery zu beheben.

Answer 1

Sie müssen die Funktion auf das Objekt binden, bevor sie als Ereignis-Listener zu geben:

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

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

sonst wird es von seinem ursprünglichen Objekt löst und nicht die erwartete this.

Answer 2

Als Alternative zur Verwendung von binden, können Sie bewegen:

var thisModal = this; 

vom handle Methode an den Konstruktor.

Es ist auch Konvention, Konstruktoren Namen beginnend mit einem Großbuchstaben zu geben, so dass es einfacher ist zu sehen, dass sie Konstruktoren sind.

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>