I'm currently reading Chapter 2 of You Don't Know JS: this and Object Prototypes.
Let's say we have this code:
function foo() {
console.log(this.a);
}
var obj = {
a: 33,
foo: foo
}
var a = 22;
I understand implicit this binding:
obj.foo(); // 33
I even understand how using it as a callback function makes it "lose" it's this value:
setTimeout(obj.foo, 1000); // undefined
What I don't understand is the following excerpt about Explicit Binding using call() and apply():
Unfortunately, explicit binding alone still doesn't offer any solution to the issue mentioned previously, of a function "losing" its intended this binding, or just having it paved over by a framework, etc.
I don't get why using call() (explicit binding) still doesn't fix this issue.
I tried using the following example to re-create how it doesn't work but it seems that setTimeout isn't able to handle using call()? It fires immediately instead of waiting 1000 ms.
setTimeout(foo.call(obj),1000);
I do realize that using setTimeout(foo.bind(obj),1000); would fix this, I'm just trying to wrap my head around understanding this excerpt from the book.
It fires immediately instead of waiting 1000 ms
Right, because .call executes the function. Maybe this is easier to understand: foo.call(obj) is exactly the same as obj.foo(). However, setTimeout expects a function to be passed. That's why you did
setTimeout(obj.foo, 1000);
earlier, and not
setTimeout(obj.foo(), 1000);
So, if you can't use .call, how do you set the this value? That's what .bind solves. Instead of calling the function it creates a new function with a bound this value and this new function can then be passed around without loosing its this value.
Related: How to access the correct `this` context inside a callback?
This might not be the most precise overview but might help to understand how to relate .call/.apply and .bind to each other:
+-------------------+-------------------+
| | |
| time of | time of |
|function execution | this binding |
| | |
+-------------------+-------------------+-------------------+
| | | |
| function object | future | future |
| f | | |
| | | |
+-------------------+-------------------+-------------------+
| | | |
| function call | now | now |
| f() | | |
| | | |
+-------------------+-------------------+-------------------+
| | | |
| f.call() | now | now |
| f.apply() | | |
| | | |
+-------------------+-------------------+-------------------+
| | | |
| f.bind() | future | now |
| | | |
+-------------------+-------------------+-------------------+
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments