They are all prototypes of the object Function
where it aims to perform a function by passing through it a different context and arguments.
- call: context, param1, param2, param3, ...
- apply: context, array of parameters
Already the bind he is a little different and younger, not all browsers have support, he will create a "wrapper" of his function, resulting in a new function, with context and fixed arguments.
For example:
function foo(nome, idade) { return 'ola '+nome+', você tem '+idade}
var joao = foo.bind(window, 'joao');
joao('23'); // ola joao, você tem 23
joao('26'); // ola joao, você tem 26
// o que é o mesmo que:
var joao = function (idade) {
return foo('joao', idade);
}
// porém evita bastante rescrita no seu código
// mantive o argumento nomeado como `idade` para fins didaticos o que
// é feito na realidade é não passar argumentos e o segundo argumento em
// foo seria `arguments[0]` dentro da função anonima do joao que é um wrapper
Back to the call and apply that are very similar, let’s talk about context.
pessoa = {
idade: 10,
bar: function (nome) {
return 'ola '+nome+', vc tem '+this.idade+' anos';
}
};
pessoa2 = {
idade: 20
}
pessoa.bar('joao'); // ola joao, vc tem 10 anos
// Pessoa 2 não tem o método bar, mas podemos usar da pessoa emprestado
pessoa.bar.call(pessoa2, 'joao'); // ola joao, vc tem 20 anos
//ou com apply
pessoa.bar.apply(pessoa2, ['joao']); // ola joao, vc tem 20 anos
Call is very good to carry arguments from one method to another.
function fazerAlgo(callback, arg1, arg2) {
var args = Array.prototype.splice.call(arguments, 1);
return callback.apply(this, args);
}
fazerAlgo(function (arg1, arg2) {
console.log(arg1);
console.log(arg2);
}, 'foo', 'bar');
// Escreve no console:
// 'foo'
// 'bar'
If you also want to read this article in Smashing Magazine about the Function.prototype.bind, is worth reading.
– fbadaro