Comprehensive analysis of apply, call and bind in JavaScript (recommended)

Function call method

Before talking about the three brothers apply, call and bind in JavaScript, I would like to talk about what are the calling methods of functions:

•As a function

•As a method

•As a constructor

• Indirectly call through their call() and apply() methods

We all know the previous three calling methods and are not within the scope of this article, so we will not talk about them.

Let's talk about the fourth call method

Indirect calls via call() and apply()

In fact, we can regard these two functions as methods of a certain object, and indirectly call the function by calling the method:

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

The first parameter of call() and apply() is the parent object to call the function. It is the calling context, and a reference to it is obtained through this within the function body.

So are they the same, or are there any differences, and also the bind method? Don’t worry, let’s analyze the differences and connections between the three below in detail.

call()

The call() method specifies a specific this pointer (idiot, don't bother me about its correctness) and parameters to the method that calls it. For example, there is a function like this:

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

I'll 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 these three call methods? No nonsense, please see:

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

Is this really the case? You are smart, go to the browser console and try it out. I'll go, you're a cheater, that's not like this:

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

OK, you're smart. But this already illustrates the call method very well. (Window is very advanced, Microsoft is giggling...)

We noticed that the call method, the first parameter is to specify this pointer, and each parameter after that specifies the required parameters. Note that I use "each", which means that you need several parameters and want to call the function, and write each parameter into it one by one.

apply()

apply() is the brother of call(). The other places look the same, they are all men, but they are different in one place. Let’s take a look at the example first:

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

Brother, have you written it wrong? There are more brackets. No, no, no, this is what makes it look different from the call. Its second parameter is the required parameter Array.

bind()

bind(), aren’t they three brothers, I understand this, blabla… No, no, it is a sworn brother who has become sworn brothers with apply and call, not a real brother.

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

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

At this time, fnbound is a function, another function with this pointing to null and the parameters are ['Skylor', 'min']. Called:

fnbound();

result:

null, 'Skylor', 'min'

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

The difference between bind and the other two brothers is that it does not call a function, but returns a new function. Similarly, it also specifies this pointer and parameter. The method of specifying parameters is the same as call, and it comes one by one.

Let’s have a last 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 is the entire content of apply, call and bind in JavaScript introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!