将对象绑定到 Javascript 中的函数

Question

let user = {
  firstName: "John",
  sayHi() {
    alert(`Hello, ${this.firstName}!`);
  }
};

let sayHi = user.sayHi.bind(user); 

sayHi(); // Hello, John!

setTimeout(sayHi, 1000); // Hello, John!

// even if the value of user changes within 1 second
// sayHi uses the pre-bound value which is reference to the old user object
user = {
  sayHi() { alert("Another user in setTimeout!"); }
};

为什么会有这种奇怪的行为？ 如果我更改方法的值，它不应该只使用更改后的值。 它如何在词法环境中获取user ？

Answer 1

您正在混淆变量和对象。

在这之后...

let user = {
  firstName: "John",
  sayHi() {
    alert(`Hello, ${this.firstName}!`);
  }
};

您有一个名为user的变量，其中包含一个 object。但 object 不是该变量，该变量也不是 object。如果您要运行user = null ，则 object 将仍然存在，直到垃圾被收集。

接下来，你跑

let sayHi = user.sayHi.bind(user); 

现在你有另一个变量，包含一个绑定 function。function 绑定到当前位于user中的object ，但它与user变量无关，除了你仍然可以通过该变量来操作 object（即user.firstName = "bob" ）。 该变量仍然指向上面创建的 object。

此时，您可以运行user = null并且 function sayHi仍然会有一个 function，仍然绑定到 object，它将不再被垃圾收集，因为有一个对它的活动引用。 您正在重新分配变量，但没有删除/替换它指向的 object。

稍后，当您运行此...

user = {
  sayHi() { alert("Another user in setTimeout!"); }
};

这与运行user = null没有什么不同。 变量sayHi仍然持有旧的 function，仍然绑定到旧的 object。变量user不再以任何方式与变量sayHi相关。 它们包含两个不相关的对象。