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"} 本文来源:http://www.pagecolumn.com/javascript/apply_call.htm