Un oggetto proxy JavaScript consente di intercettare e personalizzare il comportamento di un altro oggetto, senza modificare l'originale.
Utilizzando gli oggetti proxy, puoi convalidare i dati, fornire funzionalità extra e controllare l'accesso a proprietà e funzioni.
Scopri tutto sugli usi degli oggetti proxy e su come crearli in JavaScript.
Creazione di un oggetto proxy
In JavaScript, puoi creare oggetti proxy utilizzando il file Delegacostruttore. Questo costruttore accetta due argomenti: a bersaglio oggetto per avvolgere il proxy e a gestore oggetto le cui proprietà definiscono il comportamento del proxy quando si eseguono operazioni.
Prende questi argomenti e crea un oggetto che puoi usare al posto dell'oggetto di destinazione. Questo oggetto creato può ridefinire le operazioni principali come il recupero, l'impostazione e la definizione delle proprietà. È inoltre possibile utilizzare questi oggetti proxy per registrare gli accessi alle proprietà e convalidare, formattare o disinfettare gli input.
Per esempio:
cost oggettooriginale = {
pippo: "sbarra"
}cost gestore = {
Ottenere: funzione(bersaglio, proprietà){
ritorno destinazione[proprietà];
},
impostato: funzione(obiettivo, proprietà, valore){
destinazione[proprietà] = valore;
}
};
cost delegato = nuovoDelega(originalObject, gestore)
Questo codice crea un oggetto target, oggetto originale, con un unico immobile, pippoe un oggetto gestore, gestore. L'oggetto gestore contiene due proprietà, Ottenere E impostato. Queste proprietà sono note come trap.
Un trap oggetto proxy è una funzione chiamata ogni volta che si esegue un'azione specificata su un oggetto proxy. Le trap consentono di intercettare e personalizzare il comportamento dell'oggetto proxy. L'accesso a una proprietà dall'oggetto proxy chiama il metodo Ottenere trap e la modifica o la manipolazione di una proprietà dall'oggetto proxy chiama il file impostato trappola.
Infine, il codice crea un oggetto proxy con l'estensione Delega costruttore. Passa oggetto originale E gestore rispettivamente come oggetto e gestore di destinazione.
Utilizzo di oggetti proxy
Gli oggetti proxy hanno diversi usi in JavaScript, alcuni dei quali sono i seguenti.
Aggiunta di funzionalità a un oggetto
È possibile utilizzare un oggetto proxy per eseguire il wrapping di un oggetto esistente e aggiungere nuove funzionalità, come la registrazione o gestione degli errori, senza modificare l'oggetto originale.
Per aggiungere nuove funzionalità, dovrai utilizzare il Delega costruttore e definire uno o più trap per le azioni che si desidera intercettare.
Per esempio:
cost oggettoutente = {
nome di battesimo: "Kennedi",
cognome: "Martini",
età: 20,
};cost gestore = {
Ottenere: funzione(bersaglio, proprietà){
consolare.tronco d'albero(`Ottenere proprietà "${proprietà}"`);
ritorno destinazione[proprietà];
},
impostato: funzione(obiettivo, proprietà, valore){
consolare.tronco d'albero(`Impostazione proprietà "${proprietà}"valutare"${valore}"`);
destinazione[proprietà] = valore;
},
};cost delegato = nuovoDelega(userObject, gestore);
consolare.log (proxy.firstName); // Ottenere la proprietà "firstName" Kennedy
consolare.log (proxy.cognome); // Ottenere la proprietà "lastName" Martins
proxy.età = 23; // Impostazione della proprietà "età" valorizzare "23"
Questo blocco di codice aggiunge funzionalità tramite le trap proxy, Ottenere E impostato. Ora, quando si tenta di accedere o modificare una proprietà del file utenteOggetto, l'oggetto proxy registrerà innanzitutto l'operazione nella console prima di accedere o modificare la proprietà.
Convalida dei dati prima di impostarli su un oggetto
È possibile utilizzare oggetti proxy per convalidare i dati e assicurarsi che soddisfino determinati criteri prima di impostarli su un oggetto. Puoi farlo definendo la logica di convalida in a impostato trappola nel gestore oggetto.
Per esempio:
cost oggettoutente = {
nome di battesimo: "Kennedi",
cognome: "Martini",
età: 20,
};cost gestore = {
Ottenere: funzione(bersaglio, proprietà){
consolare.tronco d'albero(`Ottenere proprietà "${proprietà}"`);
ritorno destinazione[proprietà];
},
impostato: funzione(obiettivo, proprietà, valore){
Se (
proprietà "età" &&
tipo di valore == "numero" &&
valore > 0 &&
valore < 120
) {
consolare.tronco d'albero(`Impostazione proprietà "${proprietà}"valutare"${valore}"`);
destinazione[proprietà] = valore;
} altro {
gettarenuovoErrore("Parametro non valido. Si prega di rivedere e correggere.");
}
},
};
cost delegato = nuovoDelega(userObject, gestore);
proxy.età = 21;
Questo blocco di codice aggiunge regole di convalida al file impostato trappola. Puoi assegnare qualsiasi valore a età proprietà su a utenteOggetto esempio. Tuttavia, con le regole di convalida aggiunte, puoi assegnare un nuovo valore alla proprietà age solo se è un numero, maggiore di 0 e minore di 120. Qualsiasi valore si tenta di impostare su età proprietà che non soddisfa i criteri richiesti attiverà un errore e stamperà un messaggio di errore.
Controllo dell'accesso alle proprietà degli oggetti
È possibile utilizzare oggetti proxy per nascondere determinate proprietà di un oggetto. Fallo definendo la logica di restrizione in Ottenere trap per le proprietà a cui vuoi controllare l'accesso.
Per esempio:
cost oggettoutente = {
nome di battesimo: "Kennedi",
cognome: "Martini",
età: 20,
telefono: 1234567890,
e-mail: "[email protected]",
};cost gestore = {
Ottenere: funzione(bersaglio, proprietà){
Se (proprietà "telefono" || proprietà "e-mail") {
gettarenuovoErrore("Accesso alle informazioni negato");
} altro {
consolare.tronco d'albero(`Ottenere proprietà "${proprietà}"`);
ritorno destinazione[proprietà];
}
},
impostato: funzione(obiettivo, proprietà, valore){
consolare.tronco d'albero(`Impostazione proprietà "${proprietà}"valutare"${valore}"`);
destinazione[proprietà] = valore;
},
};cost delegato = nuovoDelega(userObject, gestore);
consolare.log (proxy.firstName); // Ottenere la proprietà "firstName" Kennedy
consolare.log (proxy.email); // genera un errore
Il blocco di codice sopra aggiunge alcune restrizioni al file Ottenere trappola. Inizialmente, puoi accedere a tutte le proprietà disponibili su utenteOggetto. Le regole aggiunte impediscono l'accesso a informazioni sensibili come l'e-mail o il telefono dell'utente. Il tentativo di accedere a una di queste proprietà attiverà un errore.
Altre trappole proxy
IL Ottenere E impostato trap sono le più comuni e utili, ma ci sono altre 11 trap proxy JavaScript. Sono:
- fare domanda a: IL fare domanda a trap viene eseguito quando si chiama una funzione sull'oggetto proxy.
- costruire: IL costruire trap viene eseguito quando si utilizza l'operatore new per creare un oggetto dall'oggetto proxy.
- deleteProperty: IL deleteProperty trap viene eseguito quando si utilizza il eliminare operatore per rimuovere una proprietà dall'oggetto proxy.
- ha - IL ha trap viene eseguito quando si utilizza il In operatore per verificare se esiste una proprietà sull'oggetto proxy.
- ownKeys - IL ownKeys trap viene eseguito quando chiami il file Object.getOwnPropertyNames O Object.getOwnPropertySymbols funzione sull'oggetto proxy.
- getOwnPropertyDescriptor - IL getOwnPropertyDescriptor trap viene eseguito quando si chiama il Object.getOwnPropertyDescriptor funzione sull'oggetto proxy.
- defineProperty - IL defineProperty trap viene eseguito quando si chiama il Object.defineProperty funzione sull'oggetto proxy.
- preventExtensions - IL preventExtensions trap viene eseguito quando si chiama il Object.preventExtensions funzione sull'oggetto proxy.
- isExtensible - IL isExtensible trap viene eseguito quando si chiama il Object.isExtensible funzione sull'oggetto proxy.
- getPrototypeOf - IL getPrototypeOf trap viene eseguito quando si chiama il Object.getPrototypeOf funzione sull'oggetto proxy.
- setPrototipoDi - IL setPrototipoDi trap viene eseguito quando si chiama il Object.setPrototypeOf funzione sull'oggetto proxy.
Come il impostato E Ottenere traps, puoi utilizzare queste traps per aggiungere nuovi livelli di funzionalità, convalida e controllo al tuo oggetto senza modificare l'originale.
I contro degli oggetti proxy
Gli oggetti proxy possono essere un potente strumento per aggiungere funzionalità personalizzate o convalida a un oggetto. Ma hanno anche alcuni potenziali svantaggi. Uno di questi inconvenienti è la difficoltà di debug, poiché può essere difficile vedere cosa sta succedendo dietro le quinte.
Anche gli oggetti proxy possono essere difficili da usare, specialmente se non li conosci. Dovresti considerare attentamente questi inconvenienti prima di usare oggetti proxy nel tuo codice.
