The usage contrast analysis of call,apply,bind in JavaScript _ basics

The use of the three functions of Call,apply,bind is a point of learning that the language of JavaScript cannot be crossed. I'm going to take a good look at them. The use of each of these three, and common application scenarios.

First look at call this function, can be understood as "borrow", "request". Imagine the following scenario: You are alone wandering outside, there is an urgent need to call home, but unfortunately, mobile phone owe, or no electricity, or out of the pit, in short your mobile phone is not used. But you're not supposed to call this. So you can borrow a friend's cell phone, or borrow a neighbor's cell phone, or a public telephone, so that you can complete the phone when you do not have a mobile phone available, and as to who you are using the phone call, it is not important, Anyway, it's the same as the phone call with your own cell phone. Call this function is similar to this, I use the code to simulate its application scenario:

Copy Code code as follows:

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

Rubbit This object is a mute, but he wants to say his name, light by its own ability, is impossible to achieve, fortunately, it has a good base called frog, it can speak. So, Rubbit asked Frog for it to realize this wish. The first parameter of Frog.say.call () must be the person who sent the request, and the lawyer prefers to be called a client. Here is Rubbit request frog for it say name, so fill rubbit. As a result, the name of the Rubbit is looked up in the say, not the name of frog. What would it be like to fill out the frog here? It's like asking yourself to do something, and it's OK to feed yourself on behalf of salt. You can try:

Copy Code code as follows:

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

I feed myself a bag of salt, I must say my name, this is nothing unexpected. Let's look at the classic use of call:

Copy Code code as follows:

Converts a parameter into a true array object
function Frog () {
var arr = [].slice.call (arguments);
Console.log (Arguments.slice,arr.slice)
Undefined function slice () {[native code]}
}
Frog (1,2,3,4)

With such a call, we can use the arguments object as an array object. On the use of call many, open the jquery source code, it is easy to find a lot of places to use. In this list, or back to the scene before us, by telephone this kind of thing is too simple, after the phone, certainly still want to take something back, after all these years wandering outside, not to honor the old man, buy some local specialties back, certainly is excellent. But the outside life pressure is so big, every day in addition to work overtime, if leave, not only pay to buckle, but also to spend a lot of money, this sum up, estimated to be enough old people in the home a year of use. Think not cost-effective, and then think of call this function, ask it to help, by the way back is very sensible choice, and it does not charge, unlimited, no limit, how many, with how much. I'll show you again in code:

Copy Code code 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 are rich and capricious, you can even send a few iphone6 plus or something back ... ^_^.

When it comes to call, it's almost over, and I don't know if the above sitcom is going to make you understand what call is, if it just reminds you of homesickness, I'm sorry.

Call also has a half brother, called apply, if you understand the use of calls, then apply is actually one thing, the only difference is that apply do not like to pass things, a bag, it seems very troublesome not to say, not environmental protection. So he offered a big box of stuff, and you put everything you had to preach in the box it provided. The big box is an array. The above example, with apply to do, this is the case:

Copy Code code as follows:

var frog = {
Name: ' Frog ',
Send:function (money,food,milk,suagate) {
alert (money+food+milk+suagate);
}
}
var rabbit = {
Name: ' Rabbit '
}
Note the difference between parameters
Frog.send.apply (rubbit,[' money ', ' food ', ' milk ', ' suagate '])

The above is Apply,call's past life. But never thought, apply and call the father, some years ago to make a fortune in real estate, outside there is also called Bind bastard. Although more than call and apply these two brothers to debut a few years later, but the ability is not negligible. It's just that his identity, in some places, is not recognized. Like IE6. I'm going to use the code to illustrate his skills:

Copy Code code 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 ();

By contrast, bind is found to be directly attached to function () {}. The equivalent of call and apply are saved, directly after the function to specify the client and the parameters to be passed. From the style of the argument, it's more like call.

As for bind, let's look at a classic usage:

Copy Code code as follows:

var obj = {
Name: ' Frog '
}
Document.addeventlistener (' click ', function () {
alert (this.name); Frog
}.bind (obj), false);

To sum up, apply,call,bind, the similarities between the three brothers are:

1. The first parameter is a state-defined scope, that is, on whose site it works.

2. Can pass parameters

Different points are:

Apply,call compatibility is better, some low version of the browser is not supported by bind.

The parameters passed by apply must be wrapped in an array, while call and bind are listed as parameters to be passed.

Whether we have a more in-depth understanding of the use of Call,apply,bind three functions, I hope this article can help.