No post 5/6 do Dominando o “this” do JavaScript eu mostrei como utilizar o “.bind” para associar um contexto a uma função de um objeto qualquer. Usando a chamada “.bind” também permite que você especifique uma lista de parâmetros para ser utilizada na chamada de função original. Isto é normalmente referenciado como “aplicação parcial de função”, já que você aplica parcialmente uma lista de parâmetros para a função, para uso posterior.

Aplicação da função parcial

Para utilizar a função parcial, você precisa, antes de mais nada, associar a função a um contexto. Depois disso, passar os parâmetros para a chamada do “.bind” mantendo esses parâmetros e aplicando-os quando a função associada for chamada.

function soma(a, b){return a + b;}

// associa e aplica a função "soma" parcialmente e 
// assim garante que o parâmetro "a" será sempre 1.
//
// Não pense que é o parâmetro "b" que será 1, pois a chamada do
// bind, o primeiro parâmetro é o contexto, que nesse caso é null
// e depois vem a lista de parâmetros, que nesse caso só estamos passando um
// e o primeiro parâmetro é o "a", entendeu?
var somaUm = soma.bind(null, 1);

// chama a função somaUm informando apenas um parâmetro,
// que será o segundo parâmetro da chamada original, já que especificamos
// o valor fixo do parâmetro "a"
var resultado = somaUm(2);
console.log(resultado); // => 3

No código acima, uma função de soma genérica é definida com dois parâmetros. Abaixo dela, a função “soma” é associada (bound) a um contexto nulo (já que não é utilizado na função) e tem o valor 1 especificado como primeiro parâmetro (“a”). O resultado dessa chamada do “.bind” é uma função que recebe apenas um parâmetro e repassa para a função original juntamente com o contexto e parâmetro passado para a chamada do “.bind”.

Depois, quando a função “somaUm(2)” é executada, um único parâmetro é especificado. Como a chamada do “.bind” especificou o primeiro parâmetro para a chamada original, essa chamada “somaUm(2)” especifica o valor do parâmetro “b” da função original. O resultado então é exibido no console com o resultado esperado, 3.

Esta pequena dica pode ser utilizada de forma bastante interessante. Tente você mesmo e veja onde está a diversão e os perigos ao utilizá-la em suas aplicações.

Mais uma coisinha

Nesta série de artigos, eu falei como você pode gerenciar o valor do “this” dentro de praticamente qualquer função que você escreva. Estas técnicas são poderosas, mas às vezes desnecessárias. Às vezes você precisa de algo mais simples do que foi mostrado aqui. E nesses casos, eu gosto de utilizar a associação simples de variável para pegar o valor do “this”.

O exemplo mais comum disso são métodos callback, tais como esse:

var meuObjeto = {
  fazerAlgo: function(){
               // guarda uma referência do "this" (que neste ponto é o meuObjeto)
               var self = this;

               //faz uma chamada callback qualquer
               outraCoisaQualquer.fazerOutraCoisa("bla bla bla", function(dado){
                 // chama uma função utilizando a referência do "self" 
                 // que aponta para o "this" do "meuObjeto"
                 //
                 // se utilizar o "this" aqui, o contexto dele é "fazerAlgo"
                 //
                 self.outraCoisa(dado);
               });
  },
  
  outraCoisa: function(dado){
    // aqui, se usar o "this" ele acessará o contexto do "meuObjeto"
    /* 
    ....
    */
  }
};

Tenha em mente que o nome da variável “self” não tem importância alguma. Poderia ser chamada de qualquer coisa. O ponto em questão é que temos que obter a referência do “this” e usar essa referência dentro da função callback. Esta é outra técnica poderosa que pode simplificar drasticamente o código quando você utiliza callbacks e outras situações onde closures são apropriados.

Por assim dizer, não considero este bônus como parte integrante das regras explicadas no Dominando o “this” do JavaScript e por causa disso não foi adicionado na série. Aqui é somente mostrado como utilizar variáveis e closures de maneira interessante e não gerenciando o valor do “this”. Mas é uma técnica que você deve conhecer e utilizar quando quiser.

Muito obrigado pela paciência e espero que tenha gostado da série.
Se houver alguma dúvida, sugestão ou percebeu algum erro de digitação, não hesite em entrar em contato que responderei tão rápido quanto puder e atribuirei o crédito pela ajuda.

Até mais!
André Fellows