Javascript - Call And Apply

javascript

http://www.sitepoint.com/whats-the-difference-between-function-call-and-function-apply/ - done reading
http://www.markhneedham.com/blog/2010/02/28/javascript-confusing-call-and-apply/
http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-calling-javascript-methods-on-other-objects/

// JavaScript - The .call and .apply method:

var result = objectName.methodName.call(contextObject [, arg1[, arg2[, ...]]]);
var result = objectName.methodName.apply(contextObject [, argsArray]);

The .call method allows you to call (execute) a method of another object in the 
context of a different object (the calling object).

var result = objectName.methodName.call(contextObject [, arg1[, arg2[, ...]]]);

where contextObject is the context object, and arg1, arg2, etc are parameters 
for the method. If contextObject is null or undefined, the this keyword will be 
the global object.

You can assign a different 'this' object when calling an existing function. The 
this keyword refers to the current object, the calling object. With call, you 
can write a method once and then inherit or run it in another object, without 
having to rewrite the method for the new object.

The apply function is very similar to the call function.  The apply function 
allows you to apply a method of another object in the context of a different 
object (the calling object).

var result = objectName.methodName.apply(contextObject [, argsArray]);

where contextObject is the context object and argsArray is an optional array 
that will be passed as arguments for the method. If thisArg is null or undefined, 
the this keyword will be the global object.

apply is very similar to call, except for the type of arguments it supports. 
You can use the arguments array instead of a named set of parameters. 
With apply, you can also use an array literal, for example, 
fun.apply(this, [name, value]), or an Array object, for example, 
fun.apply(this, new Array(name, value)). You can also use the arguments array 
for the argArray parameter. The arguments array-like object is a local variable 
of a function. It can be used for all unspecified arguments of the called object. 
Thus, you do not have to know the arguments of the called object when you use 
the apply method. You can use arguments to pass all the arguments to the called 
object. The called object is then responsible for handling the arguments.

function avg() {
    var sum = 0;
    for (var i = 0, j = arguments.length; i < j; i++) {
        sum += arguments[i];
    }
    return sum / arguments.length;
}
avg.apply(null, [2, 3, 4, 5]);

The second arguments to apply() is the array to use as arguments.

What is the purpose of the .call method?

The .call method allows you to call (execute) a method of another object in the context of a different object (the calling object).

var result = objectName.methodName.call(thisArg [, arg1[, arg2[, ...]]]);

where thisArg is the context object, and arg1, arg2, etc are parameters for the method. If thisArg is null or undefined, the this keyword will be the global object.

You can assign a different 'this' object when calling an existing function. The this keyword refers to the current object, the calling object. With call, you can write a method once and then inherit or run it in another object, without having to rewrite the method for the new object.

var o1 = {testvar:22, fun:function() { alert('o1: ' + this.testvar); }};
var o2 = {testvar:33, fun:function() { alert('o2: ' + this.testvar); }};

Lets assume that function fun is the same for both o1 and o2, we would not want to type for each of our object, but, let's say, o1.fun is a very clever and long function you've been developing over the last week and now it finally works. Imagine that it has 100 lines scattered with variable this all over the code. So how would you call o1.fun but have this point to o2? Try the following:

o1.fun.call(o2);

You have forced variable this to point to o2 while executing the method fun of o1, in other words, more scholarly: the method o1.fun is running in the scope of object o2. You can think of scope as of value of variable this while running a function, a method of an object.

What is the purpose of the apply function / method?

The apply function allows you to apply a method of another object in the context of a different object (the calling object).

var result = objectName.methodName.apply(thisArg[, argsArray]);

where thisArg is the context object and argsArray is an optional array that will be passed as arguments for the method. If thisArg is null or undefined, the this keyword will be the global object.

apply is very similar to call, except for the type of arguments it supports. You can use the arguments array instead of a named set of parameters. With apply, you can use an array literal, for example, fun.apply(this, [name, value]), or an Array object, for example, fun.apply(this, new Array(name, value)). You can also use the arguments array for the argArray parameter. The arguments array-like object is a local variable of a function. It can be used for all unspecified arguments of the called object. Thus, you do not have to know the arguments of the called object when you use the apply method. You can use arguments to pass all the arguments to the called object. The called object is then responsible for handling the arguments.

You can assign a different this object when calling an existing function. this refers to the current object, the calling object. With apply, you can write a method once and then inherit it in another object, without having to rewrite the method for the new object.

function avg() {
    var sum = 0;
    for (var i = 0, j = arguments.length; i < j; i++) {
        sum += arguments[i];
    }
    return sum / arguments.length;
}
avg.apply(null, [2, 3, 4, 5]);

The second arguments to apply() is the array to use as arguments

How can we use .call to chain constructors for an object?

function product(name, value){
   this.name = name;
   if (value >= 1000) {
      this.value = 999;
   } else {
      this.value = value;
   }
}

function prod_dept(name, value, dept){
   this.dept = dept;
   product.call(this, name, value);
}

prod_dept.prototype = new product();

How can we use .apply to chain constructors?

function product(name, value)
{
  this.name = name;
  if (value > 1000)
    this.value = 999;
  else
    this.value = value;
}

function prod_dept(name, value, dept)
{
  this.dept = dept;
  product.apply(this, arguments);
}
prod_dept.prototype = new product();
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License