Question

我对javascript很新，我遇到一些问题，理解为什么我的第一个代码没有按预期工作。我已经阅读了一些关于＆＃34;这＆＃34;的文章，但它没有帮助。

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

第一个代码：

这里我将一个事件监听器附加到一个名为elem的元素上。附加函数是user_obj的一个属性，但是当我执行它时，它给了我错误＆＃34; TypeError：this.some_func未定义＆＃34;。我怀疑的是当我使用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，因此无需绑定它。

查看示例：它在匿名函数中打印this的值，第一次将其绑定到user_obj，第二次没有绑定

＆＃13;

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)})());

＆＃13;

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

＆＃13;

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

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

为什么不绑定（对象）将它绑定到anoynamous函数内的对象？

1 个答案: