Difference between bind, apply and call method?

Question

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.

Answer 1

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

Answer 2

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