The call method and apply method in JavaScript use contrast _ basics

Source: Internet
Author: User

Method definition
Call Method:
Syntax: Call ([thisobj[,arg1[, arg2[, [,. argn]]]]
Definition: Invokes one method of an object, replacing the current object with another object.
Description
The call method can be used to invoke a method instead of another object. The call method can change the object context of a function from the initial context to the new object specified by Thisobj.
If the thisobj parameter is not supplied, the Global object is used as a thisobj.

Apply method:
Syntax: Apply ([Thisobj[,argarray]])
Definition: Applies one method of an object and replaces the current object with another object.
Description
If Argarray is not a valid array or is not a arguments object, it will result in a typeerror.
If you do not supply any of the Argarray and thisobj parameters, the Global object will be used as a thisobj and cannot be passed any parameters.

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,add.call (sub,3,1) = Add (3,1) with add, so the result is: alert (4); Note: The function in JS is actually an object, the function name is a reference to a 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 (); 
 
Using the call or Apply method, the ShowName () method originally belonging to the animal object is given to Object cat. 
//input result is "cat" 
Animal.showName.call (Cat, ","); 
Animal.showName.apply (cat,[]); 

Call means to put the animal method to carry out the cat, the original cat is no ShowName () method, now is the animal ShowName () method put to cat to execute, so this.name should be cat

C, Implementing 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 the cat does not have all the Animal properties and methods, the Cat object can directly call the Animal method and properties.

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 easy to use two call to achieve multiple inheritance.
Of course, JS inheritance There are other methods, such as the use of prototype chain, this does not belong to the scope of this article, but here to explain the use of call. Said call, and of course, apply, the two methods are basically a meaning, the difference is that the second parameter of call can be any type, and the second parameter of apply must be an array, or it can be a arguments

The call and apply methods in JavaScript are used primarily to change the context of a function object, which is what this in the function points to.

The method is invoked as follows:

Fun.call (Obj1, arg1, arg2, ...);
Fun.apply (Obj2, [Arrs]);

Specific examples:

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 ']);

The example shows that when calling say in a normal way, this in the method points to the Obj1, which, when invoked by call and apply, points to Obj2.

As you can see from the example, call and apply function exactly the same, and the calling method differs only by the argument list.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.