What is this after calling bind twice on the same function?
The first bind wins. A bound function's this is permanent, so calling bind again on it, or call and apply, cannot change it. Only extra preset arguments from the second bind take effect.
Explain it simply
Think of a name written in permanent marker on a water bottle. You can hand the bottle to someone else, but the name stays. bind creates a new function whose this is sealed in. Binding that result again creates yet another wrapper, but the inner function still calls the original with the first this.
That also means call, apply and even calling it as a method (obj.boundFn()) cannot override it. The one thing that can is new, which creates a fresh object and ignores the bound this.
Example
function who() {
return this.name;
}
const a = who.bind({ name: "A" });
const b = a.bind({ name: "B" });
console.log(a()); // Output: A
console.log(b()); // Output: A
console.log(a.call({ name: "C" })); // Output: A
const holder = { name: "D", run: a };
console.log(holder.run()); // Output: AWhat to say in the interview
"bind permanently fixes this. A second bind produces a wrapper around the already-bound function, so the first this still applies; call, apply and method-call syntax cannot change it either. The only exception is calling the bound function with new."
Common mistakes
- Believing the last bind wins.