JavaScript类中bind方法使用疑问：为何需绑定this？

一、为什么必须用bind(this)？ #

当你把this.onClick赋值给DOM元素的onclick属性时，这个函数会脱离Menu实例的上下文。JavaScript中函数的this指向由调用场景决定：

• 如果通过Menu实例调用（比如menu.onClick()），this指向该实例；
• 但当函数作为DOM事件处理函数被触发时，浏览器会自动将this绑定为触发事件的DOM元素（也就是这里的elem）。

如果不做bind(this)处理，onClick内部的this会指向<div id="menu">，自然无法调用save/load这些Menu实例的方法，导致this[action]()报错。

二、this.onClick和elem.onClick的关系 #

两者并非“等价”，只是赋值操作让它们产生了引用关联：

1. 初始状态：this.onClick是Menu类定义的原型方法，属于Menu实例；elem.onClick是DOM元素的事件属性，默认值为null。
2. 赋值后的变化：
   • 若直接写elem.onclick = this.onClick，此时elem.onclick和this.onClick指向同一个未绑定的函数——但调用时的this完全不同：前者调用时this是DOM元素，后者调用时this是Menu实例。
   • 当使用bind(this)后，this.onClick.bind(this)会返回一个新的绑定函数，再把这个新函数赋值给elem.onclick。此时elem.onclick和this.onClick指向的是两个不同的函数，只是新函数内部会把this固定为Menu实例。

验证代码 #

可以在构造函数中添加日志验证：

constructor(elem) {
  this._elem = elem;
  console.log(this.onClick === elem.onclick); // 初始为false
  elem.onclick = this.onClick;
  console.log(this.onClick === elem.onclick); // 未bind时为true，指向同一函数
  elem.onclick = this.onClick.bind(this);
  console.log(this.onClick === elem.onclick); // bind后为false，指向不同函数
}

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