Creare un Proxy
Avvolga gli oggetti per intercettare le operazioni.
Creare un Proxy è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 1 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.
Che cos'è un Proxy
Un Proxy avvolge un oggetto e consente di intercettare operazioni fondamentali come la lettura, la scrittura e l'eliminazione delle proprietà.
Lo si crea con new Proxy(target, handler), dove handler definisce i trap che personalizzano il comportamento.
Un handler vuoto
Con un handler vuoto, il proxy si comporta esattamente come il target. Ogni operazione passa direttamente all'oggetto sottostante.
const target = { greeting: 'hello' };
const proxy = new Proxy(target, {});
console.log(proxy.greeting);
proxy.greeting = 'hi';
console.log(target.greeting);Target e proxy condividono lo stato
Il proxy non copia il target. Entrambi fanno riferimento allo stesso oggetto sottostante, quindi una modifica effettuata tramite uno dei due è visibile in entrambi.
const target = { count: 0 };
const proxy = new Proxy(target, {});
proxy.count = 5;
console.log(target.count);
target.count = 10;
console.log(proxy.count);Aggiungere un trap get
Il trap get intercetta le letture delle proprietà. In questo caso ogni lettura viene registrata prima di restituire il valore.
const proxy = new Proxy({ name: 'Ada' }, {
get(target, prop) {
console.log('reading ' + prop);
return target[prop];
}
});
console.log(proxy.name);I parametri del trap
Il trap get riceve il target, il nome della property e il receiver (il proxy). Spetta a Lei decidere cosa restituire.
const proxy = new Proxy({ a: 1 }, {
get(target, prop) {
return prop in target ? target[prop] : 'missing';
}
});
console.log(proxy.a);
console.log(proxy.b);Proprietà calcolate durante la lettura
Un trap get può restituire valori che il target non memorizza realmente, calcolandoli al momento.
const proxy = new Proxy({ first: 'Ada', last: 'Lovelace' }, {
get(target, prop) {
if (prop === 'full') return target.first + ' ' + target.last;
return target[prop];
}
});
console.log(proxy.full);Aggiungere un trap set
Il trap set intercetta le scritture. Deve restituire true per indicare il successo; in caso contrario, l'assegnazione viene considerata non riuscita.
const proxy = new Proxy({}, {
set(target, prop, value) {
console.log('setting ' + prop + ' = ' + value);
target[prop] = value;
return true;
}
});
proxy.score = 42;
console.log(proxy.score);Il trap has
Il trap has intercetta l'operatore in e consente di personalizzare i controlli di appartenenza.
const proxy = new Proxy({ a: 1 }, {
has(target, prop) {
console.log('checking ' + prop);
return prop in target;
}
});
console.log('a' in proxy);
console.log('b' in proxy);Il trap deleteProperty
Il trap deleteProperty intercetta delete. Restituisca true in caso di successo.
const proxy = new Proxy({ secret: 'x', ok: 'y' }, {
deleteProperty(target, prop) {
console.log('deleting ' + prop);
delete target[prop];
return true;
}
});
delete proxy.secret;
console.log(Object.keys(proxy));Sono disponibili molti trap
Oltre a get e set, i proxy supportano trap per has, deleteProperty, ownKeys, apply (per le funzioni), construct e altro ancora. Implementi solo quelli necessari.
const proxy = new Proxy({ x: 1, y: 2 }, {
ownKeys(target) {
console.log('listing keys');
return Object.keys(target);
}
});
console.log(Object.keys(proxy));Perché i proxy sono importanti
I proxy consentono di aggiungere convalida, registrazione, valori predefiniti e reattività senza modificare l'oggetto target. Sono alla base di framework come il sistema di reattività di Vue. Ora approfondirà i trap get e set.
const logged = new Proxy({ v: 0 }, {
get: (t, p) => { console.log('get ' + p); return t[p]; },
set: (t, p, val) => { console.log('set ' + p); t[p] = val; return true; }
});
logged.v = 9;
console.log(logged.v);Verifica rapida
Che cosa crea new Proxy(target, handler)?
Riepilogo: creazione di un Proxy
Ha imparato a intercettare le operazioni sugli oggetti:
new Proxy(target, handler)avvolge un oggetto con dei trap.- Un handler vuoto lascia passare tutto; proxy e target condividono lo stato.
- Trap comuni:
get,set,has,deleteProperty,ownKeys. - I trap set e delete devono restituire
truein caso di successo.
Domande Frequenti
La lezione «Creare un Proxy» è gratuita?
Sì — il testo completo di «Creare un Proxy» è 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 «Creare un Proxy»?
Avvolga gli oggetti per intercettare le operazioni. 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 1 di 4.
Quanto tempo richiede la lezione «Creare un Proxy»?
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
- Creare un Proxy
- Trap get e set
- L'API Reflect
- Casi d'uso pratici dei Proxy