Como funciona a função proxy do jQuery

Olá, pessoal!

Neste post vou mostrar um exemplo de uso da função proxy do jQuery.

No código abaixo tenho uma simples classe, que guarda em seus atributos um botão e uma mensagem. Eu registro um evento no click do botão para dar um alert com a mensagem correspondente. Vai funcionar, não vai?

function ButtonWithMessage(button, message) {    
    this.button = button;    
    this.message = message;    
    button.click(function() {        
        alert(this.message);    
    });
}

var bt1 = new ButtonWithMessage($('#bt1'), 'Mensagem do Botão 1');
var bt2 = new ButtonWithMessage($('#bt2'), 'Mensagem do Botão 2');

Não, não vai. O problema está na linha em destaque. O alert está dentro da função que responde pelo evento do click, e não dentro do objeto da classe ButtonWithMessage. Sendo assim, o this naquele contexto se refere ao elemento que foi clicado (um elemento HTML) e não ao nosso objeto. Nesse caso o alert vai mostrar undefined, pois o elemento HTML não tem um atributo message.

Aí que entra o jQuery.proxy. Se trocarmos o código do evento para este:

button.click($.proxy(function() { 
    alert(this.message); 
}, this));

Aí funciona!

Ao invés de passarmos apenas uma function como anteriormente, passamos esta function através do proxy. O primeiro parâmetro é a própria function e o segundo é o contexto, neste caso o próprio objeto da classe ButtonWithMessage.

jQuery.proxy( função, contexto )

Em resumo, o que ele faz é transformar o this dentro da função para o objeto que foi passado como contexto. Agora nosso código vai enxergar o this.message, mesmo dentro de outra função.

É isso aí. Qualquer dúvida, comente.

[]’s

Tags:

Sobre o Autor

Douglas Matoso
Douglas Matoso

Desenvolvedor web desde 2008. Criador do Web Dev Drops.

0 Comentários

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *