JavaScript Academy · Lezione

Trap get e set

Personalizzi la lettura e la scrittura delle proprietà.

Trap get e set è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

I trap get e set

I trap get e set sono gli hook dei proxy più utilizzati. Intercettano la lettura e la scrittura delle proprietà, consentendo di trasformare i valori, convalidare gli input o registrare gli accessi.

La firma del trap get

get(target, property, receiver) viene eseguito a ogni lettura di una proprietà. Restituisca ciò che desidera che il chiamante veda.

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

console.log(proxy.price);

Valori predefiniti tramite get

Un trap get può fornire un valore alternativo per le proprietà mancanti invece di restituire 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);

Trasformare i valori letti

Il trap get può modificare la forma dei valori prima di restituirli, ad esempio convertendo le stringhe in maiuscolo.

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

console.log(proxy.name);

La firma del trap set

set(target, property, value, receiver) viene eseguito a ogni scrittura. Deve restituire true in caso di successo; altrimenti, in modalità strict viene generato un errore.

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

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

Convalida in set

L'uso classico di un trap set è la convalida: rifiutare i valori non validi prima che raggiungano il 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); }

Convertire i valori in set

Oltre a rifiutare i valori, un trap set può normalizzare l'input, ad esempio rimuovendo gli spazi iniziali e finali dalle stringhe prima di memorizzarle.

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 + ']');

Registrare entrambe le operazioni

Combini get e set per tracciare ogni accesso. È estremamente utile per eseguire il debug dell'utilizzo di un oggetto.

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);

Imporre la sola lettura

Un trap set che rifiuta sempre le scritture trasforma il proxy in una vista di sola lettura del 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);

Chiavi Symbol e dettagli interni

I trap vengono attivati anche per le chiavi Symbol. Faccia attenzione: registrare ogni proprietà, compresi i Symbol interni, può produrre un volume eccessivo di output; applichi quindi un filtro quando necessario.

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

console.log(proxy.a);

Perché get e set sono importanti

Insieme, questi trap consentono di gestire convalida, proprietà calcolate, valori predefiniti, registrazione e reattività senza modificare il target. Tuttavia, scrivere manualmente target[prop] = value all'interno dei trap presenta alcuni casi limite. L'API Reflect, che vedrà nella prossima lezione, li gestisce correttamente.

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 rapida

Che cosa deve restituire un trap set per indicare che un'assegnazione è riuscita?

Riepilogo: trap get e set

Ha imparato a usare i trap fondamentali dei proxy:

get(target, prop, receiver) intercetta le letture e può restituire qualsiasi valore.
set(target, prop, value, receiver) intercetta le scritture e restituisce true in caso di successo.
Li utilizzi per valori predefiniti, trasformazioni, convalida e registrazione.
Per gestire correttamente le operazioni interne ai trap, utilizzi Reflect, che vedrà nella prossima lezione.

Domande Frequenti

La lezione «Trap get e set» è gratuita?

Sì — il testo completo di «Trap get e set» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Trap get e set»?

Personalizzi la lettura e la scrittura delle proprietà. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Trap get e set»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy