Call,apply,bind

Call,apply,bind

First, call&apply

Call, apply all belong to Function.prototype method, because belong to Function.prototype, so each function object instance, namely each method has call, apply property.

If you don't understand, see "JavaScript Everything is Object 3".

And they all work the same way, just using different ways.

role: Borrow someone else's way to invoke it, just as you have this method.

Well, how can they achieve this goal?

Object.

Object?

Yes, it's actually the internal pointer that changes the execution context object, because in JavaScript, the code always has an execution context object, so when I manually change it, I can change the execution context, and I can use my own method to become my own.

Let's write a demo together.

If, I have a method A, its function is the output object's name this.name; then when I use call or apply to change its execution context object, its output is different.

What do you mean?

Please see the following code for details:

<! DOCTYPE html>    
Execute the above code with the following results:
Did you see that? Therefore, the role of call,apply is to borrow other people's methods, change the execution of other methods of the context object for themselves, to become their own methods, for their own use.
Note:   Call  or the first parameter of an apply, they will implicitly assume that the context object is executing. If we do not specify the execution context object for call or apply , that is, the first parameter of call and apply is null, undefined or NULL, in non-strict mode, the this within the function Point to Window or Global , the browser is window . In strict mode, NULL is null,undefined or null is undefined. 
What do you mean, see the demo below (only call for example and not strict mode):
<! DOCTYPE html>    
See, I passed in the above sequence is the number, string, True, object, null,undefined and empty, get the following result:
So, what's the difference between call and apply since they work?
Their first argument, without a doubt, is an incoming execution context object, with the difference starting with the second argument.  The other parameters of the call method are passed in turn to the borrowed method as arguments, and apply is two arguments, and the second parameter is passed as an array. 
The simple point is:
Fun.call (obj, arg1, arg2 ...) = = = Fun.apply (obj, [Arg1, arg2 ...]) = = = Obj.fun (arg1, arg2 ...);
Well, the difference between call and apply is that the parameters are passed differently, what's the use?
According to the difference of their passing parameters, when the parameters are clear, call is used, and when the passed parameters are ambiguous, apply, that is, pass arguments to apply as the second parameter.
Well, it's useless to say no, let's write a demo to see.
<! DOCTYPE html>    
Execute the above code with the following results:
Call and apply, do you understand?

 
   
 
  
    
 
     
 
      
Second, bind
 
     
 
    
 
 
   
Bind, at the very beginning of understanding it, is the object that changes the execution context.
For example, when we use settimeout, this in the default anonymous function points to window, but when I use the object's method, I want to point this to the object. One way to do this is to use bind.
(For settimeout's understanding, see "settimeout").
Such as:
<! DOCTYPE html>    
The result of executing the preceding code is:
Well, since the talk of BIND is a change in the execution context of the object, I am, why don't we use call or apply?
is call or apply not the object that changes the execution context?
Yes, we will change the above demo to change bind to call, the code is as follows:
<! DOCTYPE html>    
Open the Chrome debugger and get the result:
Gee, I'm not, is this like bind?
Yes, but what if we change the delay time of settimeout to 2 seconds, or longer? Open the Chrome debugger, run the modified code, you will find the difference, call or apply is immediately rendered ' monkey ', and bind is to delay the corresponding time after the rendering of ' monkey '.
Why?
Because call or apply is executed immediately after the execution context object has been swapped, bind is to create a new function after swapping the execution context object.
Let's write a demo together and see.
<! DOCTYPE html>    
Execute the above code with the result:
Gee, how did you just print a ' call| | What about ' Apply '?
Because we are in the above code, bind I just bound the object O2, but it does not execute immediately, but return a new function Oh.
We modify the above code to manually perform the new function after the bind return look.
<! DOCTYPE html>    
To run the code:
Hey, that's right.
Therefore, it is important to remember that the bind method creates a new function, called a binding function, when the binding function is called, and the binding function takes the first parameter passed in when it is created as this, which is the execution context object.
Good night, everyone~.
Call,apply,bind