JavaScript Object Literal "this"

Question

Я написал литерал объекта JavaScript для обработки нескольких модалов на HTML-странице. Когда я нажимаю на кнопку, чтобы показать Modal, я получаю следующую ошибку.

Uncaught TypeError: this.showModal is not a function 
    at HTMLButtonElement.modalBtns.(anonymous function).onclick (file:///C:/dj-sites/ux_bee/js/base.js:63:22) 

Я думаю, проблема заключается в том, что ключевое слово this это указывает на кнопку, но не на литерал объекта. Не знаю, как это исправить.

var myModalObj = { 
    findAncestor: function(el, cls) { 
     while ((el = el.parentElement) && !el.classList.contains(cls)); 
     return el; 
    }, 
    showModal: function(btn){ 
     var modal_id = btn.getAttribute('data-modal') 
     var modal = document.getElementById(modal_id); 
     modal.style.display = "block"; 
    }, 
    closeModal: function (btn){ 
     var modal = this.findAncestor(btn, 'modal') 
     modal.style.display = "none"; 
    }, 
    init: function(){ 
     var modalBtns = document.getElementsByClassName('my-modal-btn'); 
     for(var i = 0; i < modalBtns.length; i++) { 
      var btn_modal = modalBtns[i]; 
      modalBtns[i].onclick = function() { 
       this.showModal(btn_modal); 
      } 
     } 

     var closeBtns = document.getElementsByClassName('modal-close'); 
     for(var i = 0; i < closeBtns.length; i++) { 
      var btn_close = closeBtns[i]; 
      closeBtns[i].onclick = function() { 
       this.closeModal(btn_close); 
      } 
     } 
    } 
} 
myModalObj.init() 

Answer 1

Простой ответ - просто заменить все экземпляры this с myModalObj, как так.

var myModalObj = { 
    findAncestor: function(el, cls) { 
     while ((el = el.parentElement) && !el.classList.contains(cls)); 
     return el; 
    }, 
    showModal: function(btn){ 
     var modal_id = btn.getAttribute('data-modal') 
     var modal = document.getElementById(modal_id); 
     modal.style.display = "block"; 
    }, 
    closeModal: function (btn){ 
     var modal = myModalObj.findAncestor(btn, 'modal') 
     modal.style.display = "none"; 
    }, 
    init: function(){ 
     var modalBtns = document.getElementsByClassName('my-modal-btn'); 
     for(var i = 0; i < modalBtns.length; i++) { 
      var btn_modal = modalBtns[i]; 
      modalBtns[i].onclick = function() { 
       myModalObj.showModal(btn_modal); 
      } 
     } 

     var closeBtns = document.getElementsByClassName('modal-close'); 
     for(var i = 0; i < closeBtns.length; i++) { 
      var btn_close = closeBtns[i]; 
      closeBtns[i].onclick = function() { 
       myModalObj.closeModal(btn_close); 
      } 
     } 
    } 
} 
myModalObj.init() 

Причина вы должны сделать это потому, что функция, которую вы пытаетесь вызвать только хранится в myModalObj, так что это единственный способ, которым Вы можете назвать это.