javascript - 为什么 bind(object) 不将 this 绑定(bind)到匿名函数中的对象？

Question

我是 javascript 的新手，我在理解为什么我的第一个代码没有按预期工作时遇到了一些问题。我已经阅读了几篇关于“this”的文章，但没有帮助。

  var user_obj = {
      some_func : function () {
          alert("hello");
   }}

第一个代码:

在这里，我将一个事件监听器附加到某个名为 elem 的元素。附加函数是 user_obj 的一个属性，但是当我执行它时，它给我错误“TypeError:this.some_func is undefined”。我的疑问是当我使用 bind 将其显式绑定(bind)到 user_obj 时，为什么会出现此错误。

document.getElementById("elem").addEventListener("click",(function () {this.some_func.bind(user_obj)})());

第二个代码:

这按预期工作。

document.getElementById("elem").addEventListener("click",this.some_func.bind(user_obj));

感谢您的帮助。

Answer 1

bind() 在函数内部而不是外部更改 this 的值。

在您的第一个示例中，匿名函数使用 this 来引用全局对象。

如果您希望匿名函数使用this 来引用user_obj，您需要将匿名函数bind 到user_obj，不是some_func()，也是因为some_func()没有使用this，所以不需要绑定(bind)。

看例子:在匿名函数中打印this的值，第一次绑定(bind)到user_obj，第二次不绑定(bind)

var user_obj = {
  some_func : function () {alert("hello");}
};
        
document.getElementById("elem").addEventListener("click",(function () {console.log(this)}.bind(user_obj))());

document.getElementById("elem").addEventListener("click",(function () {console.log(this)})());

<div id="elem"></div>

您的第二个示例在没有 bind() 的情况下也能正常工作，因为它再次更改了函数内部的值，其中未使用 this。但是由于在你的第二个例子中对函数的调用不是在匿名函数中， this 的值不会更改为全局对象

顺便说一句，它是getElementById()，而不是getElementByID()(请注意Id的d )