Comparison and usage examples of call and apply functions in Javascript_javascript skills

The call and apply functions are rarely used in some simple Javascript operations. In other larger operations, such as web application development and js framework development, you may often encounter these two functions. There is a lot of information on the Internet about the explanation of these two functions, but I think that a lot of the information is either scripted or highly similar and lacks down-to-earth explanations. Next, I try to analyze and explain these two functions in a clearer and simpler way.

Copy code The code is as follows:

We can regard call() and apply() as methods of an object, and call functions indirectly by calling the execution of the method. The first actual parameter of call() and apply() is the parent object of the function to be called, which is the calling context. 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 first analyze call. Here is ECMAScript 3rd Edition’s explanation of the call function [2]: When the call method is called by a function object (func.call(0)), a necessary parameter and several An optional parameter, its execution process is as follows:
a, if the object calling call is not runnable, throw a TypeError.
b, Set the parameter list to empty
c. If the called method passes in more than one parameter, then insert arg1, arg2... into the parameter list in sequence
d. Return the function result of calling call, replace this in the calling function (func) with the passed parameter 1, and use 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 the call must also be a function. When this call is called, just replace this in the function that calls the call with the object passed in. Here is an example:

<script>
 function C1(){
 this.name='张三';
 this.age='24';
 this.sayname=function(){
  console.log("这里是C1类，我的名字是:"+this.name+"我的年龄是"+this.age);
 }
 }
 function C2(){
 this.name='李四';
 this.age='25';
 }
 var c1=new C1();
 var c2=new C2();
 c1.sayname();
 c1.sayname.call(c2);
</script>

Execution result:
This is category C1, my name is: Zhang San and my age is 24
This is category C1, my name is: Li Si and my age is 25
In the above code, two classes are declared, C1 and C2. C1 has two attributes and one method. C2 also has the same two attributes as C1. After instantiation, c1.sayname() prints out the actual attributes, c1 .sayname.call(c2) prints only the attributes 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 attributes 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 and passed in as one parameter, while call is divided into multiple parameters and passed in.
So, what are the applications of apply and call functions? The first one is a classic method on the Internet to find the maximum element in a numeric array. Just use Math.max.apply(null,array). The other one is to use apply and call to implement inheritance, as follows:

<script> 
 function Human(name,sex){
 this.name=name;
 this.sex=sex;
 this.walk=function(){
  console.log('我在走路');
 }
 }
 function Child(){
 Human.call(this,"小明","男")
 this.paly=function(){
  console.log('我很喜欢玩耍');
 }
 this.intruduce=function(){
  console.log('大家好，我是'+this.name);
 }
 }
 var jinp=new Human('Jack','男');
 var xiaoping=new Child();
 xiaoping.walk();
 xiaoping.paly();
 xiaoping.intruduce();
</script>

Execution result:
I'm walking
I like playing very much
Hello everyone, I am Xiao Ming
A function similar to call() and apply() is bind(), which is a new method in ECMAScript 5, but bind() can be easily simulated in ECMAScript 3. The bind function is also a method of Function.prototype in Javascript. The main content of this method is to bind a function to an object. When the bind() method is bound to function f() and an object o is passed in as a parameter, this method will return a new function to be called as a method of o. Any arguments passed into the new function will be passed into the original function. As follows:

<script>
 function introduce(country,hobby){
 return "大家好，我叫"+this.name+", 今年"+this.age+"岁, 来自"+country+", 喜欢"+hobby;
 }
 var xiaoming={name:"小明",age:20}
 var jieshao=introduce.bind(xiaoming);
 console.log(jieshao("中国","打球"));
</script>

Execution result:
Hello everyone, my name is Xiao Ming, I am 20 years old, from China, and like to play ball
The above example is equivalent to:

<script>
 function introduce(country,hobby){
 return "大家好，我叫"+this.name+", 今年"+this.age+"岁, 来自"+country+", 喜欢"+hobby;
 }
 var xiaoming={name:"小明",age:20}
 console.log(introduce.apply(xiaoming,["中国","打球"]));
    //或者下面这个
 console.log(introduce.call(xiaoming,"中国","打球"));
</script>

It should be noted that in the strict mode of ECMAScript 5, the first argument of call() and apply() will become the value of this, even if the passed argument is the original value or even null or undefined . In ECMAScript 3 and non-strict mode, incoming null and undefined will be replaced by the global counterpart, and other primitive values ​​will be replaced by the corresponding wrapper object.

Reference materials

[1], The Definitive Guide to Javascript 6th Edition, page 189
[2], Function.prototype.call (thisArg [ , arg1 [ , arg2, … ] ] )
[3], Function.prototype.apply (thisArg, argArray)