Parsing the Apply and call and bind in JavaScript

Function Call method

Before I talk about the three brothers of apply, call, and bind in JavaScript, I want to start by saying what the function calls:

• As a function
• As a method
• As a constructor function
• Indirectly through their call () and the Apply () method

The previous three invocation methods, which we all know and are not within the scope of this article, will not be talked about.

Let's say this fourth method of invocation

Indirect calls via call () and apply ()

In fact, we can think of these two functions as a method of an object, calling the function indirectly by invoking the method:

function f () {}f.call (o); f.apply (o);

The first parameter of call () and apply () is the parent object to invoke the function, which is the calling context through which this is used in the body of the function to obtain a reference to it.

So are they the same, or are there differences, and the bind method? June Mo Urgent, the following detailed analysis of their three differences and relations.

Call ()

The call () method assigns a specific this pointer to the method that invokes it (the idiom, do not tangle with me about its correctness) and parameters. For example, there is a function:

var function (Arg1, arg2) {  Console.log (this, arg1, arg2);      }

I'm going to call it:

Fn.call (null, ' Skylor ', ' min ');        // 1fn.call (undefined, ' skylor ', ' min ');   // 2 var function  ' Skylor ', ' min ');          // 3

What is the return value of these three call methods? No nonsense, please see:

1.  null "Skylor" "min" 2.  Undefined "Skylor" "min" 3.  FX "Skylor" "min"

Is that true, wit you, go to the browser console small try, I go, you this pit goods, not this:

Chrome 1.  window "Skylor" "min" 2.  Window "Skylor" "min" 3.  FX "Skylor" "min"

Well, you're witty. But this is a good indication of the call method. (Window is very advanced, Microsoft laughs ... ）

We notice that the call method, the first parameter is to specify the this pointer, followed by each parameter to specify the required parameters, note that I use "each", which means that you need a few parameters will want to invoke the function, a parameter written in.

Apply ()

Apply () is the brother of Call (), the other places are the same, all male, just a place different. First look at the example:

Fn.apply (null, [' Skylor ', ' min ']);//1fn.apply (FX, [' Skylor ', ' min ']);   2

Man, did you write the wrong words, more of the brackets ah. No, no, no, that's the difference between him and the call. The second parameter is a required parameter array.

Bind ()

Bind () Well, they are three not three brothers, this I understand, blabla .... No no no, it is the brother who is sworn in with apply and call, not his brothers.

Of course, the Bind method also allows you to specify the this pointer, but instead of calling the function, it returns a function (or copy ) of the function that called it, and assigns the function a specific this pointer and argument. Practice, example shows everything:

var fnbound = Fn.bind (null, ' Skylor ', ' min ');

At this point, Fnbound is a function, a This is a pointer to null, and the argument is another function of [' Skylor ', ' min ']. Call it:

Fnbound ();

Results:

null, ' Skylor ', ' min '

Don't tangle with me about window.

Bind is not the same as the other two brothers, is, it is not called function, but return a new function, again, it is also specified this pointer and parameter, the way to specify parameters and call, is a one to come.

Finally, let's take an example:

 var  ShoppingCart = (function   () { var  _calculateprice = function () { this . Price * this  .amount;         };  return   {calculateprice: _ca Lculateprice}) ();  var  goods = {name: ' Hammer ', pric E:  199 2};shoppingcart.calcu Lateprice.call (goods);  

OK, above is my opinion, if there is an incorrect place, welcome to correct and criticize, not very happy and grateful. by Skylormin

Parsing the Apply and call and bind in JavaScript