O que é Proxy no Javascript?

Marcos Junior | codermarcos
Frontend Quest
Published in
2 min readMay 24, 2018

--

Como usar o Proxy no Javascript? E por quê usa-lo?

Representação de como funciona um Proxy

O Proxy normalmente é um intermediário para ações entre o usuário e seu servidor. Mas no javascript o Proxy é usado para criar um comportamento customizado para um objeto, como definir ações para determinado comportamento.

Uso simples

Seu uso é bem simples, precisa apenas de um target (que é um objeto) e um handler que definirá o comportamento customizado:

Uso simples do Proxy no Javascript

Exemplo

Neste caso o target sera o objeto pessoa

Variável pessoa

E o comportamento customizado será usando a trap (armadilha) no set, ou seja, quando alguém definir um novo valor para qualquer propriedade do objeto ele que irá interceptar esta ação.

Variável que sera o nosso handler

Agora que o target e o handler estão definidos, basta apenas instanciar o objeto Proxy

Instanciando o Proxy

Então quando alterar alguma propriedade do proxy nosso comportamento customizado sera chamado

Testando o set do Proxy

Tipos de traps (Armadilhas)

Traps nada mais são que os tipos de armadilhas que pode ter dentro de um handler, ou seja, qual ação vai disparar o proxy. Listei abaixo as que acho mais uteis:

Como visto acima o set é disparado quando alguem define um novo valor para uma propriedade.

Handler com trap set

Observação se não atribuir o value ao objeto target ele não atualizará o valor

O get é disparado toda vez que alguém solicitar alguma propriedade daquele objeto.

Handler com trap get

O has é muito parecido com get, porém dispara quando é verificado se existe aquela propriedade naquele objeto.

Handler com trap has

O deleteProperty por sua tradução já diz tudo “excluir propriedade”, é exatamente assim que essa armadilha é disparada, toda vez que alguem tentar excluir uma propriedade.

Handler com trap deleteProperty

O defineProperty também por sua tradução já diz tudo “definir propriedade”, é exatamente assim que essa armadilha é disparada, toda vez que alguém tentar criar uma nova propriedade.

Handler com trap defineProperty

Uso real

Não é muito interessante para executar ações simples. Mas pode se tornar muito interessante e util para deixar o código mais limpo e reutilizável. Alguns exemplos são:

  • Validações
  • Correção de variáveis
  • Implementar ações no DOM
  • Restringir acesso a valores
  • Extender objetos nativos do javascript.

Suporte

Seu suporte já esta em 86,99% com base em usuários atingidos, segundo o can i use então pode usar tranquilo. Claro que se estiver usando um transpilador como Babel não precisa nem se preocupar com isso.

Conclusão

É sempre bom sair do “arroz e feijão” do javascript conhecer novos objetos, funções e características que facilitam ou até mesmo ajudam a limpar nosso código. Nesse caso acho que o Proxy em grande parte veio para limpar nosso código e deixa-lo mais legível e reutilizável. Como Addy Osmani disse “Embora estejamos despedindo de Object.observe() agora é possível termos um possível polyfill usando o Proxy”

--

--

Marcos Junior | codermarcos
Frontend Quest

Desenvolvedor Frontend na DASA, apaixonado por Javascript.