call() and apply() methods in Javascript

By: Nicholas C. Zakas Emailed: 1700 times Printed: 2205 times    

Latest comments
By: rohit kumar - how this program is work
By: Kirti - Hi..thx for the hadoop in
By: Spijker - I have altered the code a
By: ali mohammed - why we use the java in ne
By: ali mohammed - why we use the java in ne
By: mizhelle - when I exported the data
By: raul - no output as well, i'm ge
By: Rajesh - thanx very much...
By: Suindu De - Suppose we are executing

The call() method

The call() method is the method most similar to the classic object-masquerading method. Its first argument is the object to be used for this. All other arguments are passed directly to the function itself.

For example:

function sayColor(sPrefix, sSuffix) {

    alert(sPrefix + this.color + sSuffix);

};

var obj = new Object();
obj.color = “red”;

//outputs “The color is red, a very nice color indeed. “

sayColor.call(obj, “The color is “, “, a very nice color indeed. “);

In this example, the function sayColor() is defined outside of an object, and it references the this keyword even though it is not attached to any object. The object obj is given a color property equal to “red”. When call() is, well, called, the first argument is obj, which indicates that the this keyword in sayColor() should be assigned the value of obj. The second and third arguments are strings. They are matched up with the prefix and suffix arguments of sayColor(), resulting in the message “The color is red, a very nice color indeed.” being displayed.

To use this with the object masquerading method of inheritance, just replace the three lines that assign, call, and delete the new method:

function ClassB(sColor, sName) {

//this.newMethod = ClassA;
//this.newMethod(sColor);
//delete this.newMethod;
ClassA.call(this, sColor);
this.name = sName;
this.sayName = function () {
    alert(this.name);

 };
}

Here, you want the this keyword in ClassA to be equal to the newly created ClassB object, so this is passed in as the first argument. The second argument is the color argument, the only one for either class.

The apply() method

The apply() method takes two arguments: the object to be used for this and an array of arguments to be passed to the function. For example:

function sayColor(sPrefix, sSuffix) {
    alert(sPrefix + this.color + sSuffix);
};

var obj = new Object();
obj.color = “red”;

//outputs “The color is red, a very nice color indeed. “

sayColor.apply(obj, new Array(“The color is “,”, a very nice color indeed.”));

This is the same example as before, but now the apply() method is being called. When apply() is called, the first argument is still obj, which indicates that the this keyword in sayColor() should be assigned the value of obj. The second argument is an array consisting of two strings, which are matched up with the prefix and suffix arguments of sayColor(). This also results in the message “The color is red, a very nice color indeed.” being displayed.

This method is also used in place of the three lines to assign, call, and delete the new method:

function ClassB(sColor, sName) {

//this.newMethod = ClassA;
//this.newMethod(sColor);
//delete this.newMethod;
ClassA.apply(this, new Array(sColor));
this.name = sName;
this.sayName = function () {
    alert(this.name);
};

}

Once again, you pass this in as the first argument. The second argument is an array with just one value: color. You can, alternatively, pass in the entire arguments object of ClassB as the second argument of the apply() method:

function ClassB(sColor, sName) {

//this.newMethod = ClassA;
//this.newMethod(sColor);
//delete this.newMethod;
ClassA.apply(this, arguments);
this.name = sName;
this.sayName = function () {
    alert(this.name);
};

}

Of course, passing in the object of the arguments only works if the order of the arguments in the superclass constructor is exactly the same as the order of the arguments in the subclass. When this is not the case, you must create a separate array to place the arguments into the correct order. You could also use the call() method.


Javascript Home | All Javascript Tutorials | Latest Javascript Tutorials

Sponsored Links

If this tutorial doesn't answer your question, or you have a specific question, just ask an expert here. Post your question to get a direct answer.



Bookmark and Share

Comments(2)


1. View Comment

Sorry, I can't understand what is really apply and call. I'm trying hard to understand but i can't...

View Tutorial          By: Ejita at 2012-02-01 05:38:09
2. View Comment

very nice for javascript beginers..

View Tutorial          By: Nilesh at 2012-08-29 10:19:13

Your name (required):


Your email(required, will not be shown to the public):


Your sites URL (optional):


Your comments:



More Tutorials by Nicholas C. Zakas
call() and apply() methods in Javascript
this keyword sample in Javascript
Math object and Math functions in Javascript
Using parseInt() and parseFloat() in JavaScript to convert data types to Numbers
Using toString() in JavaScript to convert data types to String
Javascript Basics
History and evolution of Javascript

More Tutorials in Javascript
Use WinSCP to transfer log files remotely using Javascript
Verifying user input in JavaScript
Pause execution in JavaScript
Javascript to display client date and time on webpage
Getting Browser's height and width using Javascript
Highlighting text on a page using CSS
Using revealTrans to do page transitions in Javascript
Password protect a web page using Javascript
Diabling Right Click option in a browser using Javascript
Scrolling message on the status bar using Javascript
window.frames[i] in Javascript
Form validation using Javascript
Using && in Javascript
The if statement in Javascript
do-while, while, for and for-in loops in Javascript

More Latest News
Most Viewed Articles (in Javascript )
Using toString() in JavaScript to convert data types to String
List of Keywords and reverved words in Javascript
Math object and Math functions in Javascript
call() and apply() methods in Javascript
Highlighting text on a page using CSS
Scrolling message on the status bar using Javascript
Show how many characters remaining in a html text box using javascript
Click to remove an element from a select html form using javascript
History and evolution of Javascript
Javascript Basics
Using parseInt() and parseFloat() in JavaScript to convert data types to Numbers
Typecasting in Javascript
Bitwise NOT, AND, OR, XOR operators in Javascript
Using ! and !! in Javascript
Using && in Javascript
Most Emailed Articles (in Javascript)
do-while, while, for and for-in loops in Javascript
Show how many characters remaining in a html text box using javascript
Click to remove an element from a select html form using javascript
History and evolution of Javascript
Javascript Basics
List of Keywords and reverved words in Javascript
Using toString() in JavaScript to convert data types to String
Using parseInt() and parseFloat() in JavaScript to convert data types to Numbers
Typecasting in Javascript
Bitwise NOT, AND, OR, XOR operators in Javascript
Using ! and !! in Javascript
Using && in Javascript
The if statement in Javascript
break and continue in Javascript
switch in Javascript