如何在javascript中绑定多个功能？

Question

在下面的代码中，我将事件侦听器附加到第二个Element上，并在单击时调用First函数，后者调用second函数。在First中，this.firstElement已定义，但是当它汇总到Second函数时，将引发错误，指出this.firstElement未定义。

  class Test{
      constructor() {
          this.firstElement = document.getElementById('firstElement');
          this.secondElement = document.getElementById('firstElement');

          this.secondElement.addEventListener("click", this.First.bind(this)); 
      }  

     First() {
         this.firstElement.append('<div> new content </div>')
         this.Second(); 
     }

     Second() {
        this.firstElement.append('<div> another content </div>' )      
     }
  } 
}

Answer 1

使用箭头函数而不是类方法来定义第一和第二。这将自动将方法绑定到此。

  class Test{
      constructor() {
          this.firstElement = document.getElementById('firstElement');
          this.secondElement = document.getElementById('firstElement');

          this.secondElement.addEventListener("click", this.First); 
      }  

     First =() =>{
         this.firstElement.append('<div> new content </div>')
         this.Second(); 
     }

     Second =() => {
        this.firstElement.append(<div> another content </div>' )      
     }
  } 

您也可以直接将函数绑定到此：

  class Test{
      constructor() {
          this.First = this.First.bind(this);
          this.Second = this.Second.bind(this);
          this.firstElement = document.getElementById('firstElement');
          this.secondElement = document.getElementById('firstElement');

          this.secondElement.addEventListener("click", this.First); 
      }  

     First() {
         this.firstElement.append('<div> new content </div>')
         this.Second(); 
     }

     Second() {
        this.firstElement.append(<div> another content </div>' )      
     }
  }