javascript - 理解 JavaScript 中的 bind()

Question

根据 MDN： 绑定方法

调用f.bind(someObject)会创建一个具有与 相同的主体和范围的新函数f，但是在原始函数中发生这种情况的地方，在新函数中，它永久绑定到 的第一个参数bind，无论该函数如何使用：

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()); // azerty

var h = g.bind({a: 'yoo'}); // bind only works once!
console.log(h()); // azerty

var o = {a: 37, f: f, g: g, h: h};
console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty

但是当我尝试下面的代码时：

var module = {
  x: 42,
  getX: function() {
    return this.x;
  }
}
    
var unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined
    
var boundGetX = unboundGetX.bind(module);
console.log(boundGetX()); // expected output: 42
 
module.x = 43;
boundGetY = boundGetX.bind(module);
console.log(boundGetY()); // shouldn't this be 42??

预期输出：

undefined
42
42

实际输出：

undefined
42
43

有人可以向我解释一下吗？

Answer 1

这里 module 是一个常量，但 module.x 不是。这就是您可以更改 module.x 值但无法更改模块的原因。

所以你正在改变模块的价值，而不是模块本身。

Answer 2

我没有关注您所困惑的内容 - 看起来它正在按描述工作。

1. unboundGetX 是对您的函数的引用。
2. 您将值更改module.x为 43
3. boundGetY您通过调用创建一个新方法unboundGetX.bind(module)- 即thisboundGetY 所指的是module.
4. 你打电话boundGetY()- 它指this.x的是module.x, 43 的值。

Answer 3

当您更改同一对象的值时，您不会绑定另一个对象，因此值会更改。

  var module = {
      x: 42,
      getX: function() {
        return this.x;
      }
    }
    
    var unboundGetX = module.getX;
    console.log(unboundGetX()); // The function gets invoked at the global scope
    // expected output: undefined
    
    var boundGetX = unboundGetX.bind(module);
    console.log(boundGetX());  // expected output: 42
   
    var module2 = {
      x: 43,
      getX: function() {
        return this.x;
      }
    }
    boundGetY = boundGetX.bind(module);
    console.log(boundGetY());