javascript中如何绑定多个函数？

Question

in the code below, I attach event listener to second Element and on on click it calls First function, which calls second function. in the First, the this.firstElement is defined, but when it gests to the Second function, it throws an error that this.firstElement is undefined.

  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

Define First and Second using arrow functions instead of class methods. This will auto bind the methods to this.

  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>' )      
     }
  } 

You can also bind the functions to this directly instead:

  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>' )      
     }
  }