Getter e setter in JavaScript
Panoramica
Getter e setter in JavaScript vengono utilizzati per definire proprietà calcolate o accessori . Una proprietà calcolata è quella che utilizza una funzione per ottenere o impostare un valore di oggetto. La teoria di base sta facendo qualcosa del genere:
var user = { /* ... object with getters and setters ... */ };
user.phone = '+1 (123) 456-7890'; // updates a database
console.log( user.areaCode ); // displays '123'
console.log( user.area ); // displays 'Anytown, USA'
Ciò è utile per fare automaticamente cose dietro le quinte quando si accede a una proprietà, come mantenere i numeri nell'intervallo, riformattare stringhe, innescare eventi con valori modificati, aggiornare dati relazionali, fornire accesso a proprietà private e altro ancora.
Gli esempi seguenti mostrano la sintassi di base, anche se ottengono e impostano semplicemente il valore dell'oggetto interno senza fare nulla di speciale. Nei casi del mondo reale, modificare il valore di input e / o output in base alle proprie esigenze, come indicato sopra.
ottenere / impostare parole chiave
Supporti gete setparole chiave ECMAScript 5 per la definizione delle proprietà calcolate. Funzionano con tutti i browser moderni tranne IE 8 e versioni precedenti.
var foo = {
bar : 123,
get bar(){ return bar; },
set bar( value ){ this.bar = value; }
};
foo.bar = 456;
var gaz = foo.bar;
Getter e setter personalizzati
gete setnon sono parole riservate, quindi possono essere sovraccaricate per creare le tue funzioni di proprietà personalizzate, calcolate su più browser. Funzionerà con qualsiasi browser.
var foo = {
_bar : 123,
get : function( name ){ return this[ '_' + name ]; },
set : function( name, value ){ this[ '_' + name ] = value; }
};
foo.set( 'bar', 456 );
var gaz = foo.get( 'bar' );
O per un approccio più compatto, è possibile utilizzare una singola funzione.
var foo = {
_bar : 123,
value : function( name /*, value */ ){
if( arguments.length < 2 ){ return this[ '_' + name ]; }
this[ '_' + name ] = value;
}
};
foo.value( 'bar', 456 );
var gaz = foo.value( 'bar' );
Evita di fare qualcosa del genere, che può portare a un aumento del codice.
var foo = {
_a : 123, _b : 456, _c : 789,
getA : function(){ return this._a; },
getB : ..., getC : ..., setA : ..., setB : ..., setC : ...
};
Per gli esempi precedenti, i nomi delle proprietà interne sono astratti con un trattino basso per scoraggiare gli utenti dal fare semplicemente foo.barvs. foo.get( 'bar' )e ottenere un valore "crudo". È possibile utilizzare il codice condizionale per eseguire operazioni diverse in base al nome della proprietà a cui si accede (tramite il nameparametro).
Object.defineProperty ()
L'utilizzo Object.defineProperty()è un altro modo per aggiungere getter e setter e può essere utilizzato sugli oggetti dopo averli definiti. Può anche essere usato per impostare comportamenti configurabili ed enumerabili. Questa sintassi funziona anche con IE 8, ma sfortunatamente solo su oggetti DOM.
var foo = { _bar : 123 };
Object.defineProperty( foo, 'bar', {
get : function(){ return this._bar; },
set : function( value ){ this._bar = value; }
} );
foo.bar = 456;
var gaz = foo.bar;
__defineGetter __ ()
Infine, __defineGetter__()è un'altra opzione. È obsoleto, ma è ancora ampiamente utilizzato in tutto il Web e quindi è improbabile che scompaia presto. Funziona su tutti i browser tranne IE 10 e versioni precedenti. Anche se le altre opzioni funzionano bene anche su non IE, quindi questa non è così utile.
var foo = { _bar : 123; }
foo.__defineGetter__( 'bar', function(){ return this._bar; } );
foo.__defineSetter__( 'bar', function( value ){ this._bar = value; } );
Vale anche la pena notare che negli ultimi esempi, i nomi interni devono essere diversi dai nomi degli accessi per evitare la ricorsione (ad esempio, foo.barchiamata foo.get(bar)chiamata foo.barchiamata chiamata foo.get(bar)...).
Guarda anche
MDN get , set ,
Object.defineProperty () , __defineGetter __ () , __defineSetter __ () Supporto Getter
MSDN
IE8