Programming Tutorials

call() and apply() methods in Javascript

By: Nicholas C. Zakas in Javascript Tutorials on 2008-08-16  

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.