按钮绑定cat.feed点击事件后控制台返回undefined的原因排查

这个现象本质是 JavaScript 函数的 this 指向为运行时动态绑定，并非在定义时固定，和对象方法、事件回调的绑定规则冲突直接相关：

• 直接执行cat.feed()时，以cat对象作为调用主体触发方法，此时函数内部的this严格绑定到cat对象，因此可以正确读取this.hunger得到100，和实测的预期效果一致。
• 将cat.feed直接作为回调传给addEventListener时，传递的是方法本身的引用，已经完全脱离了cat对象的调用上下文。当点击事件触发、浏览器执行这个回调函数时，会按照DOM事件的默认规则，把函数内部的this自动绑定到触发事件的DOM元素（即本例中的feedCat按钮）。按钮元素本身不存在hunger属性，因此读取this.hunger自然返回undefined。

• 方案1：用箭头函数包裹调用逻辑，固定调用时的对象上下文
  将原事件绑定代码替换为：

  feedCat.addEventListener('click', () => cat.feed())
  

  箭头函数没有自身的this绑定，会沿用定义位置的上下文，触发时实际执行的是标准cat.feed()对象调用形式，this会正确指向cat对象。
• 方案2：用bind提前永久绑定方法的this指向
  将原事件绑定代码替换为：

  feedCat.addEventListener('click', cat.feed.bind(cat))
  

  bind会生成一个全新的包装函数，不管这个函数后续在什么场景下被调用，内部的this都会固定为传入的cat，不会被浏览器的事件回调默认绑定规则覆盖。

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