The usage of the three functions call, apply, and bind is a knowledge point that cannot be overcome by learning the language of JavaScript. Let me summarize the usage of the three of them and the common application scenarios.
First, look at the call function, which can be understood as "borrowing" and "request". Imagine the following scenario: you are wandering alone and want to call home if you have urgent matters, but unfortunately, your phone is in owed, or it is out of power, or it falls into a pit. In short, your phone is just not working. 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 complete the call without your phone being available. As for whose phone you use, it doesn't matter. Anyway, it's the same effect as making a call with your own phone. The original intention of the call function is also similar to this. Let me use code to simulate its application scenario:
var frog = { name : 'frog', say : function(){ alert(this.name); } } var rabbit = { name : 'rabbit' } frog.say.call(rubbit) // rabbitRubbit is a dumb object, but if he wants to say his name, it is impossible to achieve it with his own ability. Fortunately, it has a good friend named frog, which can speak. So, rubbit asked frog to realize this wish for it. The first parameter of frog.say.call() must be filled in the person who issued the request, and the lawyer likes to call it the client. Here is the rubbit request frog to say the name for it, so fill in rubbit. In this way, when saying, the rubbit name will be searched instead of the frog name. What would it look like if I filled in frog here? It’s like asking yourself to do something, and feeding yourself salt. You can try it:
var frog = { name : 'frog', say : function(){ alert(this.name); } } var rabbit = { name : 'rabbit' } frog.say.call(frog) // frogFeeding yourself a bag of salt must be your name, and that's nothing unexpected. Let’s take a look at the classic usage of call:
//Convert parameters into real 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)After this call, we can use the arguments object as an array object. There are many ways to use call. If you open the source code of jquery, you can easily find many places to use it. I won’t list them all here, but I will go back to the scene before us. It’s too simple to borrow a phone call. After making a phone call, I will definitely want to bring something back. After all, I have been wandering around for so many years and have not been filial to the elderly and have bought some local specialties to go back. It is definitely great. However, the pressure of life outside is so great that in addition to working, there is also overtime every day. If you take leave, not only will your salary be deducted, but you will also have to spend a lot of travel expenses. The sum of this money is probably enough for the elderly to spend a year at home. It was not cost-effective to think about it, so I thought of the call function again. Asking it for help, it is a very wise choice to take it back by the way, and it does not charge, does not limit the quantity, does not limit the weight, and it can bring as much as you have. I'll use the code to demonstrate it again:
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 willful, you can even send a few iPhone6 plus or something back. .^_^.
Speaking of this, the call is almost over. I don’t know if the scene drama above makes you understand what the call is. If it just arouses your homesickness, then I’m sorry.
Call also has a half-brother called apply. If you understand the usage of call, then apply is actually the same thing. The only difference is that when Apply doesn't like to pass on things, it seems very troublesome to put one thing in a bag, and it is not environmentally friendly. So he provided a large box for things, and just put all the things you want to pass on in the box it provided. This big box is an array. If the above example is done with apply, it is like this:
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, call. But unexpectedly, apply and Call's father made a fortune in real estate a few years ago, and there was an illegitimate child named Bind outside. Although his two brothers Call and Apply debuted a few years later, their abilities should not be underestimated. However, his identity is not recognized in some places. For example, IE6. Next, I will use code to demonstrate his skills:
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, it was found that bind can be directly connected to function(){}. It is equivalent to saving call and apply, and directly specifying the principal and the parameters to be passed after the function. In terms of the style of passing the sigma, it is more like a call.
Regarding bind, let’s take a look at another classic usage:
var obj = { name : 'frog'}document.addEventListener('click',function(){ alert(this.name); // frog}.bind(obj),false);To sum up, apply, call, bind, the similarities between these three brothers are:
1. The first parameter is the scope of the government, that is, the territory of which is the work.
2. All parameters can be passed
The differences are:
apply,call has better compatibility, bind some lower versions of browsers do not support it.
The parameters passed by apply must be wrapped in an array, while call and bind are listed one by one.
Have you gained a deeper understanding of the usage of the three functions call, apply, and bind? I hope this article can be helpful to you.