Question

调用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

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

unboundGetX是对您的函数的引用。
您将module.x的值更改为43
您可以通过调用boundGetY来创建新方法unboundGetX.bind(module)-即boundGetY引用的this是module。
您调用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());

了解JavaScript中的bind（）

3 个答案: