Binding objects to functions in Javascript

Question

let user = {
  firstName: "John",
  sayHi() {
    alert(`Hello, ${this.firstName}!`);
  }
};

let sayHi = user.sayHi.bind(user); 

sayHi(); // Hello, John!

setTimeout(sayHi, 1000); // Hello, John!

// even if the value of user changes within 1 second
// sayHi uses the pre-bound value which is reference to the old user object
user = {
  sayHi() { alert("Another user in setTimeout!"); }
};

Why this weird behaviour ? If i change the value of method shouldn't it just use the changed value . How does it obtain user in lexical environment ?

`.bind()` creates a new function, so the `sayHi` variable isn't "linked" in to `user` — Nick Parsons, Apr 01 '22 at 04:18
Well, it kind of is linked @NickParsons. They just aren't changing the `user` object, they are reassigning a new object to the variable. If instead, they did this at the end, it *would* change the output `user.firstName = "Nick"` — Mark, Apr 01 '22 at 04:27
@Mark yes, good point. I guess what I really meant is that the `sayHi` variable now refers to a new function object in memory and not to the one created in `user`. But yes, I agree that it is still linked in a sense that `user` is now bounded as the `this` value for that new function that has been created. So even if they were to do `user.sayHi = () => alert("Another user in setTimeout!");` after doing `let sayHi = ...`, it still wouldn't show the new output, but would change if they change `.firstName` like you mentioned — Nick Parsons, Apr 01 '22 at 05:23

score 2 · Accepted Answer · answered Apr 01 '22 at 04:32

You're conflating variables and objects.

After this...

let user = {
  firstName: "John",
  sayHi() {
    alert(`Hello, ${this.firstName}!`);
  }
};

You have a variable called user, containing an object. But the object is not the variable, and the variable is not the object. If you were to run user = null, the object would still exist, until garbage collected.

Next, you run

let sayHi = user.sayHi.bind(user);

Now you have another variable, containing a bound function. The function is bound to the object currently sitting in user, but it has nothing to do with the user variable, except that you can still reach through that variable to manipulate the object (ie user.firstName = "bob"). The variable still points to the object created above.

At this point, you could run user = null and the function sayHi would still have a function, still bound to the object, which will no longer be garbage collected because there is an active reference to it. You're reassigning the variable, but not removing/replacing the object to which it points.

Later, when you run this...

user = {
  sayHi() { alert("Another user in setTimeout!"); }
};

This is no different than running user = null. The variable sayHi still holds the old function, still bound to the old object. The variable user is no longer relevant to the variable sayHi in any way. They contain two unrelated objects.

Binding objects to functions in Javascript

1 Answers1