Comparative analysis of the usage of call, apply, and bind in javascript_Basic knowledge

Regarding the usage of the three functions call, apply, and bind, it is an insurmountable knowledge point when learning the language of JavaScript. Below I will summarize the usage of each of the three and common application scenarios.

First look at the call function, which can be understood as "borrowing" and "requesting". Imagine the following scenario: You are alone and wandering outside, and you want to call home if something urgent happens, but unfortunately, your phone is out of payment, or has run out of battery, or has fallen into a trap. In short, your phone just cannot be used. But you have to make this call, so you can borrow a friend's cell phone, a neighbor's cell phone, or a public phone. In this way, you can make a call even if you don't have a cell phone available. As for whose phone you made the call, it doesn't matter. Anyway, the effect is the same as calling from your own mobile phone. The original intention of the call function is similar to this. Below I use code to simulate its application scenario:

Copy code The code is as follows:

var frog = {
name : 'frog',
             say : function(){
alert(this.name);
}
}
var rabbit = {
name : 'rabbit'
}
frog.say.call(rubbit) // rabbit

Rubbit is a mute object, but he wants to say his name. It is impossible to achieve it with its own ability. Fortunately, it has a good friend named frog, and it can speak. . So, rubbit asked frog to realize this wish for it. The first parameter of frog.say.call() must be filled in with the person making the request, which lawyers like to call the client. Here rubbit asks frog to say its name for it, so fill in rubbit. In this way, when saying, the name of the rubbit will be searched instead of the name of the frog. What would it look like if I filled in frog here? This is like asking yourself to do something. Feeding yourself salt is also okay. You can try it:

Copy code The code is as follows:

var frog = {
name : 'frog',
             say : function(){
alert(this.name);
}
}
var rabbit = {
name : 'rabbit'
}
frog.say.call(frog) // frog

Feeding yourself a bag of salt, you must have said your name. There is no surprise at all. Let’s take a look at the classic usage of call:

Copy code The code is as follows:

//Convert parameters into real array objects
function frog(){
var arr = [].slice.call(arguments);
console.log(arguments.slice,arr.slice)
// undefined function slice() { [native code] }
}
frog(1,2,3,4)

After such a call, we can use the arguments object as an array object. There are many uses for call. Open the source code of jquery and you can easily find many applications. I won't list them all here, but let's go back to our previous scene. It's too simple to borrow a phone. After making a call, I definitely want to take something back with me. After all, I have been wandering away for so many years and have not paid proper respect to the elderly. It would definitely be great to go back and buy some local specialties. However, the pressure of life outside is so great. In addition to going to work, you have to work overtime every day. If you ask for leave, not only will your salary be deducted, but you will also spend a lot of travel expenses. The total amount of money is probably enough for the elderly to stay at home for a year. . It was not cost-effective to think about it, so I thought of calling this function and asking it for help. It is a very wise choice to take it back with me. Moreover, it does not charge a fee, and there is no limit on the quantity and weight. You can bring as much as you want. Let me demonstrate it again with code:

Copy code The code is as follows:

var frog = {
name : 'frog',
Send : function(money,food,milk,suagate){
alert(money food milk suagate);
}
}
var rabbit = {
name : 'rabbit'
}
frog.send.call(rubbit,'money','food','milk','suagate')

If you have money and willfulness, you can even send a few iPhone6 ​​plus or something back. .^_^.

The call is almost over at this point. I don’t know if the above melodrama made you understand what the call is about. If it just aroused your homesickness, then I’m sorry.

call also has a half-brother called apply. If you understand how to use call, then apply is actually the same thing. The only difference is that apply doesn’t like to pass things. A bag seems very troublesome and not environmentally friendly. So it provides a big box to hold things, and you just put all the things you want to transfer in the box it provides. This big box is an array. The above example, if used to apply, would look like this:

Copy code The code is as follows:

var frog = {
name : 'frog',
Send : function(money,food,milk,suagate){
alert(money food milk suagate);
}
}
var rabbit = {
name : 'rabbit'
}
//Pay attention to the difference in parameters
frog.send.apply(rubbit,['money','food','milk','suagate'])

The above is the past and present life of apply and call. But they never expected that apply and call's father had made a fortune in real estate a few years ago, and he also had an illegitimate son named bind outside. Although he debuted a few years later than his two brothers, call and apply, his abilities should not be underestimated. However, his identity is not recognized in some places. Such as IE6. Below I will use code to demonstrate his skills:

Copy code The code is as follows:

var name = 'rubbit';
var frog = {
name : 'frog',
           say: function(){
             setTimeout(function(money,milk){
alert(this.name money milk)
              }.bind(this,'money','milk'),1000)
}
}
frog.say();

Through comparison, we found that bind can be used directly after function(){}. It is equivalent to omitting call and apply, and specifying the client and parameters to be passed directly after the function. In terms of the style of passing parameters, it is more like call.

Regarding bind, let’s look at a classic usage:

Copy code The code is as follows:

var obj = {
Name : 'frog'
}
document.addEventListener('click',function(){
​​ alert(this.name); // frog
}.bind(obj),false);

To summarize, the similarities between these three brothers, apply, call, and bind, are:

1. The first parameter is the bound scope, that is, whose territory the work is being done.

2. You can pass parameters

The difference is:

apply, call has better compatibility, and bind is not supported by some lower version browsers.

The parameters passed by apply must be wrapped in an array, while call and bind list the parameters to be passed one by one.

Do you have a deeper understanding of the usage of the three functions call, apply, and bind? I hope this article can be helpful to you.