Понимание 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.