Понимание bind () в JavaScript

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.x - нет.По этой причине вы можете изменить значение module.x, но не можете изменить модуль.

, поэтому вы изменяете значение модуля, а не самого модуля.

Answer 2

Когда вы изменяете значение того же объекта, вы не привязываете другой объект, поэтому значение изменяется.

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

Answer 3

Я не понимаю, что вас смущает - похоже, все работает так, как описано.

1. unboundGetX является ссылкой на вашу функцию.
2. Вы изменяете значение module.x на 43
3. Вы создаете новый метод boundGetY, вызывая unboundGetX.bind(module) - т. Е. this, на который ссылается boundGetY - module.
4. Вы звоните boundGetY() - это относится к this.x, который является значением module.x, 43.