JavaScript Academy · Aula

Armadilhas get e set

Personalize a leitura e a gravação de propriedades.

Armadilhas get e set é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Os interceptadores get e set

Os interceptadores get e set são os ganchos de proxy mais usados. Eles interceptam a leitura e a escrita de propriedades, permitindo transformar valores, validar a entrada ou registrar acessos.

Assinatura do interceptador get

get(target, property, receiver) é executado a cada leitura de propriedade. Retorne o que quiser que o chamador veja.

const proxy = new Proxy({ price: 10 }, {
  get(target, prop) {
    return target[prop];
  }
});

console.log(proxy.price);

Valores padrão por meio de get

Um interceptador get pode fornecer um fallback para propriedades ausentes, em vez de retornar undefined.

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    return prop in target ? target[prop] : 0;
  }
});

console.log(proxy.a);
console.log(proxy.missing);

Transformando valores lidos

O interceptador get pode remodelar os valores durante o retorno, por exemplo, convertendo cadeias de caracteres para maiúsculas.

const proxy = new Proxy({ name: 'ada' }, {
  get(target, prop) {
    const value = target[prop];
    return typeof value === 'string' ? value.toUpperCase() : value;
  }
});

console.log(proxy.name);

Assinatura do interceptador set

set(target, property, value, receiver) é executado a cada escrita. Ele deve retornar true em caso de sucesso; caso contrário, o modo estrito lança um erro.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    target[prop] = value;
    return true;
  }
});

proxy.x = 5;
console.log(proxy.x);

Validação em set

O uso clássico de um interceptador set é a validação: rejeitar valores inválidos antes que cheguem ao target.

const person = new Proxy({}, {
  set(target, prop, value) {
    if (prop === 'age' && (typeof value !== 'number' || value < 0)) {
      throw new TypeError('age must be a non-negative number');
    }
    target[prop] = value;
    return true;
  }
});

person.age = 30;
console.log(person.age);
try { person.age = -5; } catch (e) { console.log(e.message); }

Convertendo valores em set

Além de rejeitar valores, um interceptador set pode normalizar a entrada, por exemplo, removendo espaços em branco das cadeias de caracteres antes de armazená-las.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    target[prop] = typeof value === 'string' ? value.trim() : value;
    return true;
  }
});

proxy.name = '   Ada   ';
console.log('[' + proxy.name + ']');

Registrando as duas operações

Combine get e set para rastrear cada acesso. Isso é extremamente útil para depurar como um objeto é usado.

const proxy = new Proxy({ v: 1 }, {
  get(target, prop) {
    console.log('GET ' + prop);
    return target[prop];
  },
  set(target, prop, value) {
    console.log('SET ' + prop + ' = ' + value);
    target[prop] = value;
    return true;
  }
});

proxy.v = 42;
console.log(proxy.v);

Impondo somente leitura

Um interceptador set que sempre rejeita escritas transforma um proxy em uma visão somente leitura do target.

const readonly = new Proxy({ pi: 3.14 }, {
  set() {
    console.log('writes are blocked');
    return false;
  }
});

try {
  'use strict';
  readonly.pi = 0;
} catch (e) {
  console.log(e.name);
}
console.log(readonly.pi);

Chaves de símbolo e elementos internos

Os interceptadores também são acionados para chaves de símbolo. Tenha cuidado: registrar todas as propriedades, incluindo símbolos internos, pode gerar muito ruído; filtre-os quando necessário.

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    if (typeof prop === 'string') console.log('reading ' + prop);
    return target[prop];
  }
});

console.log(proxy.a);

Por que get e set são importantes

Juntos, esses interceptadores permitem validação, propriedades calculadas, valores padrão, registro e reatividade, tudo sem modificar o target. Porém, escrever manualmente target[prop] = value dentro dos interceptadores envolve casos-limite. A API Reflect, apresentada a seguir, lida corretamente com eles.

const tracked = new Proxy({ total: 0 }, {
  set(target, prop, value) {
    console.log(prop + ' changed to ' + value);
    target[prop] = value;
    return true;
  }
});
tracked.total = 100;
console.log(tracked.total);

Verificação rápida

O que um interceptador set deve retornar para indicar uma atribuição bem-sucedida?

Recapitulação: interceptadores get e set

Você aprendeu os interceptadores fundamentais de proxy:

get(target, prop, receiver) intercepta leituras; retorne qualquer valor.
set(target, prop, value, receiver) intercepta escritas; retorne true em caso de sucesso.
Use-os para valores padrão, transformações, validação e registro.
Para lidar corretamente com operações internas nos interceptadores, use Reflect, apresentado a seguir.

Perguntas Frequentes

A aula “Armadilhas get e set” é grátis?

Sim — o texto completo de “Armadilhas get e set” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Armadilhas get e set”?

Personalize a leitura e a gravação de propriedades. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Armadilhas get e set”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy