Como funciona a função proxy do jQuery

Douglas Matoso

Atualizado em 01/07/2011

Leitura: 2 min.

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