Call and apply functions are rarely used in some simple Javascript operations. In other large operations, such as web application development, these two functions may be encountered frequently in js framework development. There is also a lot of information on the explanations of these two functions, but I think a lot of information is either written or highly similar, and lacks down-to-earth explanations. Next, I try to analyze and explain these two functions with a clearer and simpler idea.
The code copy is as follows:
We can regard call() and apply() as methods of a certain object, and indirectly call functions by calling the method implementation. The first argument 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 in the function body. To call the function f() on the method of object o, you can use call() and apply() like this: f.call(o) f.apply(o).[1]
Let’s analyze the call first. Here is the explanation of the call function by ECMAScript 3rd Edition [2]: When the call method is called by a function object (func.call(0)), a necessary parameter and several non-essential parameters need to be passed in. Its execution process is as follows:
a, If the object calling the call is not running, a TypeError error is thrown.
b, set the parameter list to empty
c, If the called method passes more than one parameter, then insert arg1, arg2... into the parameter list in turn
d, returns the result of calling the call, replace this in the calling function (func) with the passed parameter 1, and treat the passed parameter list as the parameter of this function.
In fact, the call function is the prototype of the function object. That is to say, the function that calls must be also a function. When calling this call, just replace this in the function that calls the call with the object passed. Here is an example:
<script> function C1(){ this.name='Zhang San'; this.age='24'; this.sayname=function(){ console.log("Here is C1 class, my name is: "+this.name+"My age is "+this.age); } } function C2(){ this.name='Li Si'; this.age='25'; } var c1=new C1(); var c2=new C2(); c1.sayname(); c1.sayname.call(c2);</script>Execution results:
Here is C1 category, my name is: Zhang San My age is 24
Here is C1 category, my name is: Li Si My age is 25
In the above code, two classes are declared, C1 and C2. C1 has two properties, one method, and C2 also has two properties the same as C1. After instantiation, c1.sayname() prints the actual properties, but c1.sayname.call(c2) prints the properties of c2, why is this? Because sayname() is a function and there is this in the function body, when the call is executed, this will be replaced by c2, so the attribute of c2 will eventually be printed.
The difference between apply and call lies in the passing of optional parameters. All optional parameters of apply are stored in an array, as one parameter is entered, while call is passed into multiple parameters.
So, what are the applications of apply and call functions? The first is to find the largest element in the numeric array on the network. You can use Math.max.apply(null,array) directly. The other is to use apply and call to inherit, as follows:
<script> function Human(name,sex){ this.name=name; this.sex=sex; this.walk=function(){ console.log('I'm walking'); } } function Child(){ Human.call(this,"Xiao Ming","Male") this.paly=function(){ console.log('I like playing very much'); } this.intruduce=function(){ console.log('Hello everyone, I'+this.name); } } var jinp=new Human('Jack','Male'); var xiaoping=new Child(); xiaoping.walk(); xiaoping.paly();xiaoping.intruduce();</script>Execution results:
I'm walking
I like playing very much
Hello everyone, I am Xiao Ming
The similar function to call() and apply() is bind(), which is a new method added in ECMAScript 5, but it can be easily simulated in ECMAScript 3. The bind function is also the Function.prototype method in Javascript. The main content of this method is to bind the function to an object. When the bind() method is bound to the function f() and an object o is passed as a parameter, this method will return a new function and be called as a method of o. Any arguments passed to the new function will be passed to the original function. as follows:
<script> function introduction(country,hobby){ return "Hello everyone, my name is "+this.name+", this year "+this.age+" year, from "+country+", like "+hobby; } var xiaoming={name:"Xiao Ming",age:20} var jieshao=introduce.bind(xiaoming); console.log(jieshao("China","playing ball"));</script>Execution results:
Hello everyone, my name is Xiao Ming, I am 20 years old, from China, I like to play basketball
The above example is equivalent to:
<script> function introduction(country,hobby){ return "Hello everyone, my name is "+this.name+", this year "+this.age+" year, from "+country+", like "+hobby; } var xiaoming={name:"Xiaoming",age:20} console.log(introduce.apply(xiaoming,["China","play"])); //or the console.log(introduce.call(xiaoming,"China","play"));</script>It should be noted that in the strict mode of ECMAScript 5, the first real argument of call() and apply() will become this value, even if the passed in real argument is the original value or even null or undefined. In ECMAScript 3 and non-strict mode, the passed null and undefined will be replaced by the global confrontation, while other original values will be replaced by the corresponding wrapper object.
References
[1], Authoritative Javascript Guide, 6th Edition, page 189
[2], Function.prototype.call (thisArg [ , arg1 [ , arg2, … ] ] )
[3], Function.prototype.apply (thisArg, argArray)