Call and Apply, makes sense. Who is Mr.Dave ?
Real world scenario
Let’s assume, you’ve got a friend called Dave, and he is very smart. An interesting thing about him is, he has developed a method for booking flight tickets for cheap and easily. Basically how he has done this is by creating lot of contacts in this field, so that he can get more offers while flight booking. It took him many months to get it done.
Whenever Dave wants to make a flight booking, he calls his friends ( the contacts he made ) and tells them a secret code. They verifies the code and returns good offer details to him. After that, he provides the details of his travel and payment ..etc. He gets the tickets printed on his name, age, and id card number. Till now, all is well !
Now, if you want to a book a flight ticket using the same method, what will you do ?
- You can build the same method as Dave built.
- No ! that’s gonna take lot of time
- You can ask Dave to use this method.
- This is okay, but the ticket will have always Dave’s name, age and id card number
- Fool Dave’s friends by impersonating as Dave and provide your details
- Whaaaaat ?
Yeah, you are going to do the third step now. That’s the exact need of
Structure of Dave in Code
Dave looks more like this in the code :
Do you see any problem here ? The
bookCheapFlightTickets() is complex. Also you cannot just execute it with
Dave.bookCheapFlightTickets() by giving the place, numberOfPeople, and paymentDetails as parameters. Yes, the problem is the ticket is going to be printed on Dave’s details ( here the details are his name, age and idNumber ).
What are Call and Apply
apply are two methods of the Function object. Normally you can execute a function by appending ‘()’ to its name. Say, a function
foo, can be invoked by calling
foo(). Alternately, using call or apply :
Now you may ask, what is this
context parameter. Yeah, this is the only special thing about call and apply. The
context is used for changing the execution context of the function. So when provided, it will replace all
this references in the function with itself. Remember, if the
context object is null/undefined, the execution context will be defaulted to global window object. i.e.,
this will reference to the window object. ( this will be changed in ES5 ).
So the main point is anything points to
this inside a function can be changed to this
context object. Voila, that’s what we’re looking for !
Let’s Apply What You Learnt
So now you know how to fool Dave’s friends by impersonating as Dave. You will be mostly look like below:
Now you can borrow Dave’s method using
this. When the function is executed normally, like this
foo() the execution context points to the global window object. If the function is a method of an object, the execution context points to that object. For example, in the code
obj.foo() the execution context
this points to
Apply are the only way to change the execution context when a function is invoked. You can pass an object as the first parameter of the
Apply and the
this reference will point to the object passed the function.
The only difference between the
apply is the way to you pass the parameters to them. The former takes parameters as comma separated while the latter takes only array of parameters. Honestly, I don’t know why there are two implementations.
Thanks for reading ! Please correct me if I made any mistakes in the post.