Call function in Javascript May 18, 2011

The call function is used in Object Oriented Javascript to enable a class to use properties and methods of another class.

function Person(){
    this.name = 'anika';
  }
function Author(){
   Person.call(this);
}

var aut = new Author();
alert(aut.name); // shows the value 'anika'

In the above code-
- there is a base class Person, which has a property name with a value ‘Anika’.
- another class Author, is defined. Inside the constructor of this class, we call the constructor for Person.
- The this in ‘Person.call(this)‘ refers to an instance of Person class. So the property ‘name’ is assigned the value of ‘anika’.

The same rule applies to functions defined in the class

function Person(){
   this.speak = function(){
     alert('person is speaking');
   }
}

function Author(){
   Person.call(this);
}

var aa = new Author();
aa.speak(); // alert box shows 'person is speaking'

Now, let us define a property- ‘name’ in ‘Author’ class.We assign a new value to it. We will observe how call function behaves in this case -

function Person(){
    this.name = 'anika';
  }
function Author(){
   this.name = 'tanika';
   Person.call(this);
}

var aut = new Author();
alert(aut.name); // shows the value 'anika'

In the above code, inside the ‘Author’ class constructor,
- we assign ‘tanika’ to ‘name’ property
- but when we invoke ‘call’, that value gets overridden by the value inside ‘Person’ class constructor

Let’s see what happens if inside the ‘Author’ class constructor, we invoke ‘call’ first and then assign a new value to ‘name’ property.

function Person(){
    this.name = 'anika';
  }
function Author(){  
   Person.call(this);
    this.name = 'tanika';
}

var aut = new Author();
alert(aut.name); // shows the value 'tanika'

In the above code,
- first ‘call’ method is invoked and the ‘name’ property is set to ‘anika’
- but the same property is reset in the next line (this.name = ‘tanika’)

In all the above cases, we are setting the value of only ONE property ‘name’. But javascript would behave the same way, if we try to set the values of more than one property.

function Person(){
  this.name = 'anika';
  this.age = 4;
}

function Author(){   
   Person.call(this);
}

var aa = new Author();
alert(aa.name); // shows 'anika'
alert(aa.age); // shows '4'

Lets see how ‘call’ behaves if we pass arguments in the constructor of a class-

function Person(name, age){
    this.name = name || 'anika';  // in case of empty string default value is 'anika'
    this.age = age || 4;  // in case of empty string, default value is 4
}

function Author(name, age, book){
   this.book = book;
   Person.call(this, name, age);
}

var aa = new Author('', '', 'javascript book');
alert(aa.name); // shows default value 'anika'
alert(aa.age); // shows default value '4'
alert(aa.book); // shows value 'javascript book'

We can override the values of the base class using ‘call’ method-

function Person(name, age){
    this.name = name || 'anika';
    this.age = age || 4;
}

function Author(name, age, book){
   this.book = book;
   Person.call(this, name, age);
}

var aa = new Author('', 8, 'javascript book');
alert(aa.name); // shows default value 'anika'
alert(aa.age); // shows overridden new value '8'
alert(aa.book); // shows new value 'javascript book'

In all the above examples, ‘call’ function is used for a very important feature of Object Orientation – Inheritance. But ‘call’ may also be used for another feature – Composition. I will explain Composition using call, in the next article.

Advertisement