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: