Entendendo proxy – JavaScript

O que é proxy? Quando eu ouvia falar em proxy, sempre me vinha a mente alguma coisa que ficava no meio de outras duas coisas. E se você for pensar no contexto da web, o proxy é o cara que separa você do site que você quer acessar, ou seja, ele está no meio da requisição.

Em outras palavras, os proxies são usados para definir o comportamento personalizado para o seu objeto e operações básicas (como pesquisas de propriedade, atribuições, enumerações, chamadas de função, etc).

No JavaScript, o proxy funciona exatamente da mesma forma, ficando no meio de uma determinada ação. Assim, o proxy tem o poder de manipular essa ação e modificá-la de diferentes maneiras.

Ele pode omitir ou “mentir” para o usuário, e retornar um erro ou uma informação falsa para uma tentativa de acesso a um dado, mesmo o dado existindo dentro daquele determinado objeto.

Uma curiosidade: o proxy é o conceito por trás do Vue.js. Então, toda a reatividade do Vue atualmente é graças ao proxy.

Mas antes de sairmos utilizando proxy na linguagem precisamos entender duas coisas.

Traps

Os traps (armadilhas), são métodos que fornecem acesso à propriedade de um objeto. Por exemplo, quando nós tentarmos acessar algum dado de um determinado objeto, essa tentativa é capturada por uma trap (armadilha).

Calma, isso vai ficar mais claro quando nós estivermos vendo o exemplo prático.

Handler

Temos também o handler. Esse, por sua vez, é um objeto que contém todas as traps (armadilhas) que nós vamos utilizar durante esse artigo.

Proxy

var handler = {
  //  Abaixo nós temos uma trap que é acionada quando alguém tenta acessar o uma propriedade/atributo objeto.
  get: function (objetoOriginal, atributo) {
    return objetoOriginal[atributo];
  },
};

var pessoa = {
  nome: "Pedro",
  idade: 37,
};

var pessoaProxy = new Proxy(pessoa, handler);

console.log(pessoaProxy.nome); //Pedro

Bom, vamos entender o código acima: nós já sabemos que o handler armazena todas as nossas armadilhas, mas o que ainda não sabemos é o que essa função get faz. Ela recebe dois parâmetros, objetoOriginal e o atributo, e ela simplesmente retorna esse atributo.

Agora você pode estar se perguntando: mas se o atributo não existir? Bom, nesse caso, é retornado undefined. Porém, uma vez que você está fazendo um proxy de um objeto, você pode manipular esse objeto de várias formas, como por exemplo, “mentindo” e devolvendo alguma outra coisa no lugar da informação requerida:

Perceba que mesmo existindo a propriedade nome no objeto, a gente conseguiu dizer que ela não existe.

Nós também podemos fazer validações com proxy de uma forma muito fácil, é só atribuir algum valor ao objeto se esse valor cumprir com os nossos requisitos, por exemplo:

var handler = {
  get: function (objetoOriginal, atributo) {
    if (atributo === "nome") {
      return "Infelizmente não existe um atributo nome neste objeto";
    }
  },
  get: function (objetoOriginal, atributo) {
    if (atributo === "idade") {
      return objetoOriginal[atributo];
    }
  },
  set: function (objetoOriginal, atributo, valor) {
    if (atributo === "idade") {
      if (typeof atributo === "number") {
        objetoOriginal[atributo] = valor;
      } else {
        console.log("Tipo de dado inválido, por favor insira um número");
      }
    }
  },
};

var pessoa = {
  nome: "Pedro",
  idade: 37,
};

var pessoaProxy = new Proxy(pessoa, handler);
pessoaProxy.idade = "ABC";

Perceba que a trap set recebe um atributo a mais, que neste caso é o valor a ser atribuído. Ao executar esse código, você verá que não é mais possível atribuir uma string para um campo onde deveria ser um número.

Atribuindo um valor do tipo correto, tudo ocorre como esperado:

Entendendo um pouco mais sobre traps

Toda vez que alguém tenta acessar uma propriedade do objeto uma trap get é chamada. Analogamente , toda vez que você tenta atribuir um valor para o objeto a trap set é chamada.

Só existem essas duas traps?

Definitivamente não. Na documentação da MDN nós encontramos diversas traps, cada uma com um propósito diferente. Ou seja, a trap get é chamada quando tentamos acessar um objeto, a trap set quando vamos atribuir um valor e a trap has para o operador in.

Confira a lista completa clicando aqui.

Conclusão

Neste artigo, nós conhecemos um pouco sobre proxy. E vale ressaltar que as proxys vão muito além desses simples exemplos. Você pode fazer manipulação da DOM usando proxy por exemplo.

Então não deixe de se aprofundar mais no assunto. Neste link você encontra diversos exemplos e casos de uso.

Eu vou ficando por aqui, um abraço e bons estudos!

Confira também

Entendendo o this – JavaScript

Pacote de desenvolvedor para estudantes do GitHub