Below content is an excerpt from my book – “JavaScript for C# developers“.
In the last blog post, we’ve discussed how the value of ‘this’ is evaluated in below scenarios
- Invocation of function through object
- Invocation of function directly (without any object)
If you’ve not read that blog post, I recommend you to read that blog post before proceeding further.
Today, we’re going to discuss about how the value of ‘this’ changes in the following scenarios
- Invocation of function with either call or apply
- Invocation of function when bind is used
3. Invocation of function with either call or apply
There are some scenarios where we want a particular object to be the value of ‘this’. In javascript, you can use either call or apply in order to pass the object that you want to be the value of ‘this’ keyword.
In the above code, we are calling obj1.Greeting at line 12. And it would print ‘I am Mugil’ as we are calling the Greeting function through ‘obj1’ object and value of ‘this’ keyword would be set to obj1. This is what we have discussed in the first case.
But when you want to pass any object explicitly to be the value of ‘this’, you can use either ‘call’ or ‘apply’. At line 13, we are passing ‘obj2’ as a parameter to call and ‘this’ value would be set to ‘obj2’ even though we are calling ‘Greeting’ method through obj1 as ‘obj1.Greeting’.
‘apply’ would also allow you to set any object to be the value of ‘this’. The difference between ‘call’ and ‘apply’ lies in the method of passing the parameters. When you use ‘call’, you would pass the parameters as comma separated value and you would pass the parameters as array when you use apply.
The above code for ‘obj1’ declaration is almost similar to the previous code. The only difference is that we are sending parameters to the function ‘Greeting’ now. When you use ‘call’ at line 12, we are passing the parameters as comma separated values and when you use ‘apply’ at line 13, we are passing the passing the values of the parameters as an array. However the output of line 12 and line 13 would be the same.
You can remember like when you use ‘call’, it means we should comma. C for comma. And When you use ‘apply’, it means you should pass the values as an array. A for array. Thus, ‘call’ or ‘apply’ would empower you to use any object that you want to be the value of ‘this’.
4. Invocation of function with bind
In few scenarios, we want a particular object to be bound as ‘this’ value permanently. ES5 provides bind utility which we can use to permanently bind an object to the value of ‘this’.
In the above code, we are getting a reference to the function ‘Greeting’ of Obj1 at line 12. Then we bind ‘obj2’ to the greet function and the bound function is referenced as ‘greetObj2’. The advantage of bind function is that even if you use ‘call’ or ‘apply’ once you bind a function to an object, the value of ‘this’ would be the same as the passed value when you called bind function. At line 18 and 19, the value of ‘this’ still refers to the ‘obj2’ as it was bound by the bind function and it ignores the call or apply invocation.
The disadvantage of the bind utility is that you lose the flexibility of passing the desired object to be the value of ‘this’ keyword. jQuery event handlers such as ‘click’ uses bind so that it always points to the HTML element on which the event happened.
This is how the value of ‘this’ is evaluated in JavaScript. Please let me know your thoughts in comments.