如何让按钮点击输出日志？JavaScript this关键字使用问题

我来帮你搞定这个问题，先理清楚原代码的问题所在，再给你几种可行的修改方案，顺便帮你把this关键字的用法掰明白~

原代码的核心问题 #

你的HTML里的onclick="LeetSpeaker(button)"只是创建了LeetSpeaker对象，但没有调用对象的listenClick方法，所以点击事件根本没被绑定到按钮上。另外，虽然你用self = this的方式试图解决回调里this的指向问题，这个思路是对的，但前提得先把事件绑定的步骤走通才行。

方案一：移除HTML内联事件，在JS中完成初始化（推荐） #

这种方式更符合现代前端的写法，把JS逻辑和HTML结构分开：

修改后的HTML：

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

修改后的JS：

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

function LeetSpeaker(elem) {
  return {
    listenClick() {
      // 方法1：用箭头函数继承外层this
      elem.addEventListener('click', () => {
        this.speakLeet();
      });

      // 方法2：保留你原有的self方式也完全可行
      // const self = this;
      // elem.addEventListener('click', function() {
      //   self.speakLeet();
      // });
    },
    speakLeet() {
      console.log(`1337 15 4W350M3`);
    }
  }
}

// 关键步骤：创建实例并调用listenClick绑定事件
const speaker = LeetSpeaker(button);
speaker.listenClick();

关于this的解释：

• 如果你用普通函数作为点击回调，这个函数里的this默认会指向触发事件的DOM元素（也就是按钮本身），所以直接用this.speakLeet()会报错，因为按钮没有这个方法。这时候用self = this把外层listenClick里的this（也就是LeetSpeaker返回的对象）存起来，就能在回调里访问到speakLeet了。
• 如果你用箭头函数作为回调，箭头函数没有自己的this，它会继承外层作用域的this，也就是listenClick方法里的this（同样是LeetSpeaker返回的对象），所以可以直接调用this.speakLeet()。

方案二：修改内联onclick调用（不推荐，会重复绑定事件） #

如果你一定要保留内联onclick，可以改成这样，但注意每次点击按钮都会创建新的LeetSpeaker实例并绑定一次事件，多次点击后控制台会重复输出内容：

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

JS可以保留你原来的代码，不过这个方式不太优雅，还是方案一更合适。

内容的提问来源于stack exchange，提问作者arw89