How to transfer "this" in class

Question

I have a class like that

class Message {
  initTextForm() {
    document.addEventListener('input', function(e) {
      this.addTextMessage(e.target.innerHTML);
    });
  }
  addTextMessage(text) {
    console.log(text);
  }
}

new Message().initTextForm()

<input/>

How to transfer class "this" into event listener?

Answer 1

Use an arrow function:

class Message {
  initTextForm() {
    document.addEventListener('input', (e) => {
      this.addTextMessage(e.target.value);
    });
  }
  addTextMessage(text) {
    console.log(text);
  }
}

new Message().initTextForm()

<input/>

Answer 2

You can use two ways:

1. arrow function

class Message {
  initTextForm() {
    document.addEventListener('input', (e) => {
      this.addTextMessage(e.target.value);
    });
  }
  addTextMessage(text) {
    console.log(text);
  }
}

new Message().initTextForm()

<input/>

2. binding function

class Message {
  constructor(){
      this.addTextMessage = this.addTextMessage.bind(this);
  }
  initTextForm() {
    document.addEventListener('input', this.addTextMessage)
  }
  addTextMessage(e) {
    console.log(e.target.value);
  }
}

new Message().initTextForm()

<input/>