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?

<span class="token keyword">function</span> <span class="token function">ButtonWithMessage</span><span class="token punctuation">(</span><span class="token parameter">button<span class="token punctuation">,</span> message</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>    
    <span class="token keyword">this</span><span class="token punctuation">.</span>button <span class="token operator">=</span> button<span class="token punctuation">;</span>    
    <span class="token keyword">this</span><span class="token punctuation">.</span>message <span class="token operator">=</span> message<span class="token punctuation">;</span>    
    button<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>        
        <span class="token function">alert</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>    
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">var</span> bt1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ButtonWithMessage</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#bt1'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'Mensagem do Botão 1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> bt2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ButtonWithMessage</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#bt2'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'Mensagem do Botão 2'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span>$<span class="token punctuation">.</span><span class="token function">proxy</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span> 
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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<span class="token punctuation">.</span><span class="token function">proxy</span><span class="token punctuation">(</span> função<span class="token punctuation">,</span> contexto <span class="token punctuation">)</span>

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

Sobre o Autor

Douglas Matoso
Douglas Matoso

Desenvolvedor web desde 2008. Criador do Web Dev Drops.