I was searching in stackoverflow and the web, could not get proper results or explanation siting difference between these three methods.

As far as i understand, they all do the same executing the function/method in different context.

var google = {  
    makeBeer : function(arg1,arg2){     
         alert([arg1, arg2]);        
    }    
}

google.makeBeer('water','soda');

This is my normal function of the google object. Now when i make use of call and bind method here, here is the output.

var google = {
    makeBeer: function (arg1, arg2) {
        alert([arg1, arg2]);
    }
}

google.makeBeer('water', 'soda');

function yahoo() {}

var yah = new yahoo();
google.makeBeer.call(yah, 'pepsi', 'coke');

function msn() {

}

var msn = new msn();
google.makeBeer.call(msn, 'sprite', 'limca');

I still don't see a purpose of doing this, i can go-ahead and call the google.makeBeer three times with different arguments.

Can anyone enlighten me more over this.

I was searching in stackoverflow and the web, could not get proper results or explanation siting difference between these three methods.

As far as i understand, they all do the same executing the function/method in different context.

var google = {  
    makeBeer : function(arg1,arg2){     
         alert([arg1, arg2]);        
    }    
}

google.makeBeer('water','soda');

This is my normal function of the google object. Now when i make use of call and bind method here, here is the output.

var google = {
    makeBeer: function (arg1, arg2) {
        alert([arg1, arg2]);
    }
}

google.makeBeer('water', 'soda');

function yahoo() {}

var yah = new yahoo();
google.makeBeer.call(yah, 'pepsi', 'coke');

function msn() {

}

var msn = new msn();
google.makeBeer.call(msn, 'sprite', 'limca');

I still don't see a purpose of doing this, i can go-ahead and call the google.makeBeer three times with different arguments.

Can anyone enlighten me more over this.

• javascript

• 1 In does not make a difference in your example, because google.makeBeer does not make use of this. When called as google.makeBeer(...);, this inside the function will refer to google. When called as google.makeBeer.call(yah, ...);, this will refer to yah. bind does not actually execute a function, it creates a new function where this and optionally some parameters are bound to the passed arguments. See developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/… and developer.mozilla.org/en-US/docs/JavaScript/Reference/… – Felix Kling Commented Mar 14, 2013 at 8:39
• I think the major difference between the DOM methods .call() and .apply() are the number of arguments that can be passed (one only allows one, I think, the other more). I'm not sure what the reference to .bind() is about, but it often refers to events and their handlers being "bound". – Jared Farrish Commented Mar 14, 2013 at 8:40

3 Answers 3

apply and call are the same thing except one accepts the arguments to be passed to the function in array form the other in parameter form.

bind does the same thing as call or apply depending on the framework you are using but doesn't call the function right away instead it returns a new function with your parameters bound to this and when the function is called from a new scope or context, this will still remain whatever you bound to it. Binding also allows you to prevent your constructors from being "hacked" by apply or call since it will always use the binded parameters for this no matter what someone sends to attempt to override this via call or apply.

Here is an example:

function Profile(u) {
    this.user = u;
    this.getUser = function () {
        return this.user;
    };
}

function Profile2(u) {
    this.user = u;
    this.getUser = (function () {
        return this.user;
    });
}

function Profile3(u) {
    this.user = u;
    this.getUser = (function () {
        return this.user;
    });
}

var x = new Profile('guest');
var x2 = new Profile2('guest');
var x3 = new Profile3('guest');

alert(x.getUser.apply({
    user: 'Vinoth'
})); // Vinoth
alert(x2.getUser.call({
    user: 'Babu'
})); // babu
alert(x3.getUser.bind(x3).call({
    user: 'Nandan'
})); // Guest

bind creates a new function with the same function body and then returns the new function
call calls the same function in a different passed context and the parameters have to be explicitly written apply calls the same function in a different passed context but the parameters have to be passed in a an array

var f = function(p1, p2) {
    var s = this;
}

var newFunc = f.bind(window, 1, 2);
// here newFunc is a function which when you will call will have this as window and p1 = 1 and p2 = 2

f.call(window, 1, 2);
// by executing this line this = window p1 = 1 and p2 = 2

f.call(document, 2, 3);
// by executing this line this = document p1 = 2 and p2 = 3

f.apply(window, [1, 2]);
// by executing this line this = window p1 = 1 and p2 = 2

Simply saying there is no different between apply() and call() only different between them is the argument that you pass .In apply() you must pass argument as an array where in call() method you pass the arguments in comma separated form.

Talking about the bind method, this is the new method introduced in EcmaScript5 and especially used to resolve this scope while calling the objects method. this is especially useful in asynchronous method invocation.