Comparison of the use of call method and apply method in JavaScript_Basic knowledge

Method definition
call method:
Syntax: call([thisObj[,arg1[, arg2[, [,.argN]]]]])
Definition: Call a method of an object to replace the current object with another object.
Description:
The call method can be used to call a method on behalf of another object. The call method changes the object context of a function from the initial context to the new object specified by thisObj.
If the thisObj parameter is not provided, the Global object is used as thisObj.

apply method:
Syntax: apply([thisObj[,argArray]])
Definition: Apply a method of an object to replace the current object with another object.
Description:
If argArray is not a valid array or is not an arguments object, a TypeError will be caused.
If neither argArray nor thisObj are provided, the Global object will be used as thisObj and no parameters can be passed.

Common examples
a、

function add(a,b) 
{ 
 alert(a+b); 
} 
function sub(a,b) 
{ 
 alert(a-b); 
} 
 
add.call(sub,3,1); 

What this example means is to replace sub with add, add.call(sub,3,1) == add(3,1), so the running result is: alert(4); // Note: in js The function is actually an object, and the function name is a reference to the Function object.

b.

function Animal(){ 
 this.name = "Animal"; 
 this.showName = function(){ 
  alert(this.name); 
 } 
} 
 
function Cat(){ 
 this.name = "Cat"; 
} 
 
var animal = new Animal(); 
var cat = new Cat(); 
 
//通过call或apply方法，将原本属于Animal对象的showName()方法交给对象cat来使用了。 
//输入结果为"Cat" 
animal.showName.call(cat,","); 
//animal.showName.apply(cat,[]); 

call means to put animal's method on cat for execution. Originally, cat did not have a showName() method. Now, animal's showName() method is put on cat for execution, so this.name should be Cat

c. Implement inheritance

function Animal(name){  
 this.name = name;  
 this.showName = function(){  
  alert(this.name);  
 }  
}  
 
function Cat(name){ 
 Animal.call(this, name); 
}  
 
var cat = new Cat("Black Cat");  
cat.showName(); 

Animal.call(this) means to use the Animal object instead of this object. Then doesn’t Cat have all the properties and methods of Animal? The Cat object can directly call the methods and properties of Animal.

d. Multiple inheritance

function Class10() 
{ 
 this.showSub = function(a,b) 
 { 
  alert(a-b); 
 } 
} 
 
function Class11() 
{ 
 this.showAdd = function(a,b) 
 { 
  alert(a+b); 
 } 
} 
 
function Class2() 
{ 
 Class10.call(this); 
 Class11.call(this); 
} 

It’s very simple, use two calls to achieve multiple inheritance
Of course, there are other ways to inherit js, such as using the prototype chain. This is not within the scope of this article. I just explain the usage of call here. Speaking of call, and of course apply, these two methods basically mean the same thing. The difference is that the second parameter of call can be of any type, while the second parameter of apply must be an array, or it can be arguments

The call and apply methods in JavaScript are mainly used to change the context of the function object, that is, the content pointed to by this in the function.

The calling method is as follows:

fun.call(obj1, arg1, arg2, ...);
fun.apply(obj2, [arrs]);

Specific example:

var Obj1 = {
 name: 'Object1',
 say: function(p1, p2) {
  console.log(this.name + ' says ' + p1 + ' ' + p2);
 }
};

// logs 'Object1 says Good morning'
Obj1.say('Good', 'morning');

var Obj2 = {
 name: 'Object2'
};

// logs 'Object2 says Good afternoon'
Obj1.say.call(Obj2, 'Good', 'afternoon');

// logs 'Object2 says Good afternoon again'
Obj1.say.apply(Obj2, ['Good', 'afternoon again']);

As can be seen from the example, when calling say through the conventional method, this in the method points to Obj1, but when calling through call and apply, this points to Obj2.

As can be seen from the example, the functions of call and apply are exactly the same, and the difference in their calling methods is only the parameter list.