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, the

Answer 1

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.

Answer 2

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 3

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