ключевое слово this в функции, используемой в элементе HTML

Question

См. кодовый указатель

или фрагмент кода ниже

Как я могу получить кнопку для входа в консоль при ее нажатии? Я пытаюсь научиться использовать this в JavaScript. Спасибо

const button = document.getElementById("leet");

function LeetSpeaker (elem) {
  return {
    listenClick () {
      const self = this
      elem.addEventListener('click', function () {
        self.speakLeet()
      })
    },
    speakLeet() { console.log(`1337 15 4W350M3`) }
  }
}

button {
  background-color: #b666d2;
  border: none;
  width: 100px;
  height: 30px;
  font-size: 1em;
  border-radius: 10px;
  font-family: Verdana;
}
button:hover {
  background-color: rebeccapurple;
}

<button id="leet" onclick="LeetSpeaker(button)">Click</button>

Answer 1

Проблема не в this в вашем коде.Избавьтесь от встроенного JavaScript, запустите LeetSpeaker (button) .listenClick () в вашем js-коде, и это работает.Чтобы сделать это лучше, используйте функцию стрелки, а затем просто this.speakLeet()

const button = document.getElementById("leet");
LeetSpeaker(button).listenClick();

function LeetSpeaker(elem) {
  return {
    listenClick() {
      const self = this
      elem.addEventListener('click', function() {
        self.speakLeet()
      })
    },
    speakLeet() {
      console.log(`1337 15 4W350M3`)
    }
  }
}

button {
  background-color: #b666d2;
  border: none;
  width: 100px;
  height: 30px;
  font-size: 1em;
  border-radius: 10px;
  font-family: Verdana;
}

button:hover {
  background-color: rebeccapurple;
}

<button id="leet">Click</button>

Или лучше, с функцией стрелки

const button = document.getElementById("leet");
LeetSpeaker(button).listenClick();

function LeetSpeaker(elem) {
  return {
    listenClick() {
      elem.addEventListener('click', () => {
        this.speakLeet()
      })
    },
    speakLeet() {
      console.log(`1337 15 4W350M3`)
    }
  }
}

button {
  background-color: #b666d2;
  border: none;
  width: 100px;
  height: 30px;
  font-size: 1em;
  border-radius: 10px;
  font-family: Verdana;
}

button:hover {
  background-color: rebeccapurple;
}

<button id="leet">Click</button>