call() is a method of function object. It allows you to call (execute) a function (object) as if this function were a method of another object.

Syntax

 fun.call(obj, arg1, arg2, ...);

Scope of this keyword

With the call(), the context of the function fun is executed as if it were the method of object obj. The keyword this in the function fun will be the first argument in call() method obj. If the obj is null or undefined, the value of this keyword will be the global object (Window object). The rest of the arguments starting from the 2nd one in call() method is the arguments which are needed to excecute the function fun.

The following examples help to understand the scope of this keyword.

var name = "Mark";
var fun = function(txt){
       alert(txt + this.name );
};
var obj = {name: "Tom" };

fun.call(obj, "Hello, "); 

// return Hello Tom coz this is obj
fun.call(null, "Hello, ");
 // return Hello Mark coz this is the global object

The following code is equivalent to the 1st call above in that fun is defined as a method of obj - obj.me. It's natually to see this keyword in fun is the object obj.

var fun = function (txt){
        alert(txt + this.name );
};

var obj = {
        name: "Tom",
        me: fun
};
obj.me("Hello "); // return Hello Tom

Difference between call() and apply()

The apply() method is the similar as the call() method. The difference is that the argument in apply() is given in Array.

Typical Use

Use call() to chain constructors for an object.

function div(width, height) {
    this.width = width;
    this.height = height;
    show.call(this, width, height);
  // executing context changed from div to show,
  // so this changed from div to show   
}

function show() {
    this.css = function () { 
        alert("{width: "+this.width + "; height: "+ this.height+"}"); 
    }; 
}

var div1 = new div("20px","40px");
div1.css(); // return {width: "20px"; height: "40px"}

Function bind method

One useful application is building the bind method to the prototype of the Function object. The bind method is shared and can be invoked by all functions through inheritance.

Function.prototype.bind = function(obj) {
    var _method = this;
    return function() {
        return _method.apply(obj, arguments);
    };   
} 

The benefit is that bind returns a function reference that can be used later, rather than the result of an immediate execution that we get with call. Using the bind method, the above code can be written as following,

function div(width, height) {
    this.width = width;
    this.height = height;
    var _show = show.bind(this);
    _show(width, height);
// show is the function to be executed rather than the function name
// _show is the binded function reference of the function of show
// with this keyword changed to div object
   
}

var show = function () {
    this.css = function () { 
        alert("{width: "+this.width + "; height: "+ this.height+"}"); 
    }; 
}

var div1 = new div("20px","40px");
div1.css(); // return {width: "20px"; height: "40px"}

Social Bookmark if it is useful.