1 
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 ?

Improve this question
3
  • 1
    .bind() creates a new function, so the sayHi variable isn't "linked" in to user Commented Apr 1, 2022 at 4: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" Commented Apr 1, 2022 at 4: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 Commented Apr 1, 2022 at 5:23

1 Answer 1

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.