Fully parse the apply, call, and bind in JavaScript (recommended), and fully parse the apply

Fully parse the apply, call, and bind in JavaScript (recommended), and fully parse the apply

Function call Method

Before talking about the "apply", "call", and "bind" operations in JavaScript, I would like to explain how to call functions:

• As a function

• As a method

• As a constructor

• Indirect call through their call () and apply () Methods

We all know that the preceding three call methods are not discussed in this article.

The fourth call method is described below.

Indirect call through call () and apply ()

In fact, we can regard these two functions as the methods of an object and call the functions indirectly by calling the Methods:

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

The first parameter of call () and apply () is the parent object of the function to be called. It is the call context and can be referenced by this in the function body.

So they are the same, there are still differences, there is a bind method? Junmo urgent, the following detailed analysis of the differences and links between the three of them.

Call ()

The call () method specifies the specific this pointer for the method that calls it (in idioms, do not tangle with me about its correctness) and parameters. For example, there is a function:

var fn = function (arg1, arg2) {console.log(this, arg1, arg2); } 

Let me call it:

fn.call(null, 'Skylor', 'min'); //1fn.call(undefined, 'Skylor', 'min'); //2var fx = function() {}fn.call(fx, 'Skylor', 'min'); //3 

What are the return values of the three call methods? No nonsense. Please refer:

1. null "Skylor" "min"2. undefined "Skylor" "min"3. fx "Skylor" "min" 

This is really the case, wit you, I went to the browser console to test it, I went, you are a pitfall, not like this:

chrome1. Window "Skylor" "min"2. Window "Skylor" "min"3. fx "Skylor" "min" 

Okay, you have wit. However, this shows the call method. (Window is very advanced, and Microsoft is laughing ...)

We noticed that the first parameter of the call method is to specify the this pointer, and each of the following parameters specifies the required parameters. Note that I use "each ", this means that you need to write parameters one by one like calling a function.

Apply ()

Apply () is the brother of call (). It is the same in other places. It is a male, and it is different in one place. First look at the example:

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

Dude, are you wrong? There is an extra bracket. No, no, no. This is the difference between the call length and the call length. Its second parameter is the required parameter Array.

Bind ()

Bind () Well, the three of them are not brothers. I understand this. blabla... No, no, no, it's a brother that worships with apply and call, not a brother.

Of course, the bind method also allows you to specify the this pointer, but instead of calling a function, it returns a (or copy) function that calls its function, specify the specific this pointer and parameter for this function. Convention. The example shows everything:

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

In this case, fnbound is a function. this indicates null, and the parameter is another function of ['skylor', 'Min. Called:

Fnbound ();

Result:

Null, 'skylor', 'Min'

Don't tangle with me about Window .....

Bind is different from the other two brothers. It does not call a function, but returns a new function. Similarly, it also specifies the this pointer and parameter, the method for specifying parameters is the same as that for calling.

The following is an example:

var shoppingCart = (function(){var _calculatePrice = function () {return this.price * this.amount;};return {calculatePrice : _calculatePrice}})();var goods = {name : ‘hammer',price: 199,amount : 2};shoppingCart.calculatePrice.call(goods); 

This ends .!

The above section describes all the content of apply, call, and bind in JavaScript. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!