Este post, é uma continuação de outro post, mais focado em funções.
Neste, focaremos realmente nos três métodos do título deste artigo, .call, .bind e .apply.
Agora que você já leu sobre hoisting, escopos, e como as funções funcionam e podem ser declaradas e executadas na primeira parte deste artigo, podemos abordar esta, que considero ser uma parte um pouco mais avançada do JavaScript.
Estes três métodos estão presentes no prototype de Function, ou seja, toda função terá estes métodos, nativamente.
Uma coisa bacana, também, é que isto funciona igualzinho em nodejs ;)
.call()
O método .call, literalmente, “chama” a sua função.
|
1 2 3 4 5 6 7 8 9 10 |
function func1(){ return 1; } var func2= function(){ return 2; } func1.call(); // 1 func2.call(); // 2 |
A diferença, está nos argumentos(parâmetros) passados a esta função.
Ela permite que você possa setar qual o escopo daquela função.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// criando uma variável global apenas para demonstração window.blah= 1; // uma função que utiliza o this function func1 () { console.log(this.blah); } // um objeto a ser usado como exemplo var obj= { blah: 2 }; func1(); // 1 (vindo do objeto window), escopo atual func1.call(obj); // 2 (vindo do objecto obj) |
Além disso, podemos passar parâmetros para aquela função, além do escopo atual.
|
1 2 3 4 5 6 7 8 9 |
function func1 (arg1, arg2) { console.log(this.blah, arg1, arg2); } var obj= { blah: "x" }; func1.call(obj, "a", 3); // "x", "a", 3 |
Um macete interessante, é que por exemplo, ao utilizar o objeto arguments, ele trata-se de uma collection, e não uma Array, por tanto, não tem alguns métodos do prototype de Array, como .forEach, ou .sort.
Daí, podemos resolver isto usando:
|
1 2 3 4 |
function (){ var args= Array.prototype.slice.call(arguments); args.forEach(...); } |
Isto funciona por que o método slice da Array basicamente pega uma “fatia” da array (o this, do ponto de vista do prototype), devolvendo em uma nova Array.
Neste caso, estamos dizendo para o método slice, que o “this” dele, é na verdade aquela collection, e ele nos devolverá uma nova Array, com a fatia de 0 até o final dela(pois não passamos nenhum outro argumento a ela).
.apply()
O método apply da função, é parecido com o call, porém, ele recebe uma lista de argumentos, na forma de uma Array, mesmo.
|
1 2 3 4 5 6 7 8 9 10 11 |
// igual exemplo anterior function func1 (arg1, arg2) { console.log(this.blah, arg1, arg2); } var obj= { blah: "x" }; // apply está enviando uma Array, com a lista de parâmetros func1.apply(obj, ["a", 3]); // "x", "a", 3 |
A principal vantagem é que algumas vezes, queremos apenas repassar os argumentos recebidos em uma função, diretamente para outra, usando o próprio arguments.
|
1 2 3 |
function func1(){ someOtherFunc.apply(obj, Array.prototype.slice.call(arguments)); } |
.bind()
O bind, funciona um pouco diferente.
Ele não executará sua função na mesma hora, como o call e o apply, ao contrário disto, ele RETORNARÁ uma nova função, a qual já estará com seu escopo definido.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// igual exemplo anterior function func1 (arg1, arg2) { console.log(this.blah, arg1, arg2); } var obj= { blah: "x" }; // a variável theFunction se tornará a função func1 // amarrada ao obj. var theFunction= func1.bind(obj); // ao chamar theFunction, o "this" dela já é o obj theFunction("a", 123); // "x", "a", 123 |
Quando finalmente chamamos a função “theFunction”, ela já ligada ao objeto “obj”, e então, passamos neste momento os argumentos.
Uma coisa interessante que vale lembrar, é que o bind, infelizmente, tem uma performance meio pobre! Então, cuidado ao sair usando e abusando dele por aí(em especial em loops)!
Eis uma alternativa que o pessoal faz:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// igual exemplo anterior function func1 (arg1, arg2) { console.log(this.blah, arg1, arg2); } var obj= { blah: "x" }; // theFunction recebe, literalmente, uma função, a qual usará // o .apply, quando chamada var theFunction= function(){ func1.apply(obj, Array.prototype.slice.call(arguments)); }; theFunction("a", 123); // "x", "a", 123 |
O resultado produzido é o mesmo, mas ao contrário de utilizar o .bind, estamos utilizando o .apply, passando adiante qualquer parâmetro passado àquela função.
Finalizando
Uma outra coisa interessante, é que o “this” em uma função, pode ser qualquer coisa…
|
1 2 3 4 5 6 7 8 9 |
function func3() { console.log(this); } func3(); // window func3.call({ some: "prop" }); // object { some: "prop" } func3.call("just a string"); // string "just a string" func3.call(123); // number 123 func3.call(document.body); // object HTMLBodyElement |
O que pode acabar sendo usado em situações como esta:
|
1 2 3 4 5 6 7 8 |
function calc(val1, val2){ console.log(this.max(val1, val2)); console.log(this.cos(val2)); console.log(this.min(val1, val2)); console.log(this.pow(val1, val2)); } calc.call(Math, 2, 3); // 3, -0.9899924966004446, 2, 8 |
Espero que tenha sido um post útil e bem explicativo! :)
Não deixem de divulgar o post, e dar sua opinião.