Full resolution of apply and call and bind of recommendations in JavaScript

Function Call Method

Before discussing the apply, call and bind brothers in JavaScript, I would like to start by discussing how functions are called:

&8226;As a function

&8226;As a method

&8226;As a constructor

&8226;Called indirectly through their call() and apply() methods

The first three invocation methods are known to us and are beyond the scope of this article.

Let's talk about the fourth invocation method

Called indirectly through call() and apply()

In fact, we can think of these two functions as methods of an object, which call functions indirectly by calling 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, which is the calling context and is referenced within the function body through this.

So are they the same, or are they different, or are there bind methods?Don't worry, here's a detailed analysis of the differences and connections between them.

call()

The call () method assigns a specific this pointer (idiom, don't tangle with me about its correctness) and parameters to the method calling it.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'); //1
fn.call(undefined, 'Skylor', 'min'); //2
var fx = function() {}
fn.call(fx, 'Skylor', 'min'); //3 

What are the return values of the three call methods?No crap, please see:

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

Is that true, savvy you, go to the browser console and give it a little try. I'll go, you fool, not like this:

chrome
1. Window "Skylor" "min"
2. Window "Skylor" "min"
3. fx "Skylor" "min" 

Okay, you're smart.But this is a good illustration of the call method. (window is very advanced, Microsoft snickering...

We noticed the call method, the first parameter is to specify the this pointer, followed by each parameter to specify the required parameters, and note that I'm using "each", which means you need several parameters to write in as you would call a function.

apply()

apply () is the brother of call (). Every other head is the same, all men are the same, just not the same in one place.Let's start with an example:

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

Man, did you make a mistake? There are more brackets.No, no, no, this is not the same as the length of call, its second parameter is the required parameter Array.

bind()

bind() Well, three of them are not brothers. I understand, blabla.... No, they are brothers who worship apply and call, not brothers.

Of course, the bind method also allows you to specify an this pointer, but instead of calling a function, it returns a function (or a copy) that calls its function and assigns it a specific this pointer and parameters.Practice, example 1 everything:

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

At this time, fnbound is a function, one this points to 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 in that it does not call a function, but returns a new function. Similarly, it specifies this pointers and parameters in the same way as call1, which is 11.

The last example is:

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); 

That's it.