试图做一个弹出JavaScript类

Question

我有麻烦试图做一个JavaScript类内部的点击功能，“this.overlay.style.display ='块'”由于“this”不工作，因为“this”是指回到我假设的点击事件？我该怎么做才能克服这个障碍？我可以在click事件之外使用console.log（options.overlay.id），但在click事件中它将会是未定义的。什么是最佳解决方案？

var popup_overlay = document.getElementById("popup_overlay"), 
      update_coins = document.getElementById("update_coins"); 

// POPUP CLASS 
    var Popup = function (options) { 
     console.log(options.overlay.id); //THIS WORKS 
     this.overlay = options.overlay; 
     this.button = options.button; 

     this.button.addEventListener("click", function(e){ 
//   this.overlay.style.display = 'block'; 
      alert(e.target.getAttribute('data-popup')); 
     }); 

    }; 

    var popup_update_coins = new Popup(
      { 
       overlay: popup_overlay, 
       button: update_coins 
      } 
    ); 

Answer 1

你可以使用Arrow function

// POPUP CLASS 
 
var Popup = function(options) { 
 
    console.log(options.overlay.id); //THIS WORKS 
 
    this.overlay = options.overlay; 
 
    this.button = options.button; 
 

 
    this.button.addEventListener("click", (e) => { // Arrow function 
 
    this.overlay.style.display = 'block';  // this === Popup 
 
    alert(e.currentTarget.getAttribute('data-popup')); // currentTarget 
 
    }); 
 

 
}; 
 

 
var popup_overlay = document.getElementById("popup_overlay"), 
 
    update_coins = document.getElementById("update_coins"); 
 
    
 
var popup_update_coins = new Popup({ 
 
    overlay: popup_overlay, 
 
    button: update_coins 
 
});

#popup_overlay { 
 
    display: none; 
 
}

<button id="update_coins" data-popup="TEST">update</button> 
 
<div id="popup_overlay">asdasd</div>