Sample the call of and apply of methods in javascript

  • 2020-03-30 04:24:29
  • OfStack

1. Method definition

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

The apply method:
Grammar: apply ([thisObj [argArray]])
Definition: a method that applies an object to replace the current object with another object.
Description:
This causes a TypeError if argArray is not a valid array or is not an arguments object.
If no argArray and thisObj arguments are provided, then the Global object will be used as thisObj and no arguments can be passed.

2. Common examples

A,


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

The meaning of this example is to replace sub with add, add.call(sub,3,1) == add(3,1), so the result is: alert(4); // note: the Function in js 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(); 
//The showName() method that originally belonged to the Animal object is given to the object cat for use by either the call or apply method.   < br / > //Enter the result "Cat"& NBSP; < br / > animal.showName.call(cat,","); 
//animal.showName.apply(cat,[]);

  Call means to put an animal's method on a cat. Cat used to have no showName() method, but now animal's showName() method is put on a cat, so this.name should be cat

C. Implementation 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 that the Animal object is used instead of this object, so Cat has all the attributes and methods of Animal, 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);
}

Quite simply, multiple inheritance is implemented with two calls
Of course, there are other ways in which js can be inherited, such as using a prototype chain, which is outside the scope of this article, but only to illustrate the use of call. The difference is that the second argument of call can be of any type, while the second argument of apply must be an array or arguments
And callee, caller..

Conclusion:

In short: similarities: the two methods produce exactly the same effect

Differences: methods pass different parameters


Related articles: