了解 JavaScript 中的 bind()

Question

Calling f.bind(someObject) creates a new function with the same body and scope as f, but where this occurs in the original function, in the new function it is permanently bound to the first argument of bind, regardless of how the function is being used:

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

我没有理解您的困惑 - 它看起来像描述的那样工作。

unboundGetX 是对您的函数的引用。
您将 module.x 的值更改为 43
您通过调用 unboundGetX.bind(module) 创建了一个新方法 boundGetY - 即，boundGetY 引用的 this 是 module。
您调用 boundGetY() - 它指的是 this.x，即 module.x 的值，43。

Answer 2

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

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

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

了解 JavaScript 中的 bind()

Understanding bind() in JavaScript

javascript

ecma

ecmascript-5