JS in the use of call, apply, bind

Look at the blog today, see this section of the JS code:

var bind = Function.prototype.call.bind (Function.prototype.bind);

I want to suddenly see such a piece of code, even if the JS ability to strong people, may also need to take some time to understand. A rookie like me, not to mention it. In fact, the original text has been explained to this end of the code, but I still want to use my ideas to explain the code.

The above code involves call, bind, so I'd like to distinguish the use of call, apply, and bind first. The usage of these three methods is very similar, binding the function to the context, which is used to change the direction of this in the function. As an example:

var zlw = {    "ZLW",    function  (age) {         Console.log ( this. Name + "" + Age "Years");     }; var  Xlj = {    "Xlj",Hello, I am zlw years old

Here's how to use the call and apply methods:

Zlw.sayHello.call (XLJ,xlj yearsoldzlw.sayHello.apply (XLJ, [   XLJ years old

The results are the same. From the writing we can see the similarities and differences between the two. The same is because the first parameter is the context to bind to, and the arguments that follow are passed to the function that called the method. The difference is that the parameters that the call method passes to the calling function are listed individually, and apply is written in the array.

Let's look at the use of the Bind method:

// Hello, I am xlj years old // Hello, I am xlj years old

The arguments that the bind method passes to the calling function can be listed individually or in an array. The most important difference between the bind method and call, apply is that the former returns a binding context function, and the two are directly executing the function. For this reason, the above code can also be written like this:

// Hello, I am xlj years old // Hello, I am xlj years old

The Bind method can also write fn.bind (obj, arg1) (arg2) .

Summarize the use of bind in one sentence: The method creates a new function, called a binding function, and the binding function takes the first parameter of the Bind method as this when it is created. The second and later parameters of the incoming bind method plus the arguments of the binding function itself are invoked in order as arguments to the original function.

Now go back to the beginning of that piece of code:

var bind = Function.prototype.call.bind (Function.prototype.bind);

We can understand this code this way:

Fn.bind (obj)

fn equals Function.prototype.call , and obj is equivalent to Function.prototype.bind . and fn.bind (obj) can generally be written as such Obj.fn , why? Because FN is bound to obj , this in fn points to obj . We know that the pointer to this in the function is typically the object that calls the function. So that piece of code can be written like this:

var bind = Function.prototype.bind.call;

Let's think about what Function.prototype.call.bind (Function.prototype.bind) is returning.

// Call ()

The call function is returned, but the point of the context in the call function is Function.prototype.bind . This call function can be used in this way

var bind = Function.prototype.call.bind (Function.prototype.bind); var zlw ="ZLW" }; function Hello () {  Console.log (this. name);} Bind (Hello, ZLW) ()//Hello, I am ZLW

Everyone may wonder why this is the way to write bind (Hello, ZLW) instead of writing bind (ZLW, hello) ? Since Function.prototype.call.bind (Function.prototype.bind) is equivalent to Function.prototype.bind.call , So first look at Function.prototype.bind.call how to use. Call usage is known to all:

Function.prototype.bind.call (obj, Arg)

is actually equivalent to obj.bind (ARG) . What we need is a hello function bound object ZLW , namely Hello.bind (ZLW) that is Function.prototype.bind.call (Hello, ZLW ) , so bind (Hello, ZLW) should be written like this.

Now there is another question, since Function.prototype.call.bind (Function.prototype.bind) is equivalent to Function.prototype.bind.call , why are we writing this:

var bind = Function.prototype.call.bind (Function.prototype.bind);

Rather than writing it directly:

var bind = Function.prototype.bind.call;

Let's look at an example:

var name = "Xlj"; var zlw = {    "ZLW"     function  () {        Console.log (this  . Name);}    ;
Zlw
var hello =//XLJ

Some people may be surprised, the result of hello () should be zlw . In fact, assign the zlw.hello to the variable Hello , and then call hello () , the This in the Hello function points to the window , and Zlw.hello are no longer the same context, and the global variable name is a property of window , so the result is Xlj . Then look at the following code:

var hello =//ZLW

The result is ZLW , when the hello function and Zlw.hello are the same context . In fact, the above doubts have been solved, the direct writing:

var bind = Function.prototype.bind.call;

The context in the bind function is not the same as in Function.prototype.bind.call , so using the bind function will make an error. And so write

var bind = Function.prototype.call.bind (Function.prototype.bind);

The context in the bind function is the same as in Function.prototype.call.bind (Function.prototype.bind) .

The explanation of this piece of code is this way, feeling that the language organization ability is not very good, the article is a bit wordy. There may be errors in the text, I hope you correct me.