'this.function'は関数ではありません - OO JS

Question

私はそのプロパティとしてさまざまな関数を持つモーダルオブジェクトを持っていますが、モーダルを開くためにクリックするとエラーが発生しますthis.openModalは関数ではありません。私はデバッグを試みましたが、実行したい機能にヒットするとすぐに機能が停止します。私はそれが '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

あなたは、イベントリスナーとしてそれを与える前に、オブジェクトに関数をバインドする必要があります。

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

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

それ以外の場合は、その本来の目的から外れてしまうと予想されるthisを持っていません。

Answer 2

バインドを使用する代わりに、あなたが移動することができます：

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>

完璧な作品