Metody pobierające i ustawiające w JavaScript
Przegląd
Pobierające i ustawiające w JavaScript są wykorzystywane do definiowania obliczonych właściwości lub akcesorów . Właściwość obliczona to taka, która używa funkcji do pobrania lub ustawienia wartości obiektu. Podstawowa teoria robi coś takiego:
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'
Jest to przydatne do automatycznego wykonywania czynności za kulisami, gdy uzyskuje się dostęp do właściwości, takich jak utrzymywanie liczb w zakresie, ponowne formatowanie łańcuchów, wyzwalanie zdarzeń spowodowanych zmianą wartości, aktualizowanie danych relacyjnych, zapewnianie dostępu do właściwości prywatnych i nie tylko.
Poniższe przykłady pokazują podstawową składnię, chociaż po prostu pobierają i ustawiają wewnętrzną wartość obiektu, nie robiąc nic specjalnego. W rzeczywistych przypadkach zmodyfikowałbyś wartość wejściową i / lub wyjściową, aby dopasować ją do swoich potrzeb, jak wspomniano powyżej.
pobierz / ustaw słowa kluczowe
ECMAScript 5 obsługuje get i setsłowa kluczowe do definiowania obliczonych właściwości. Działają ze wszystkimi nowoczesnymi przeglądarkami z wyjątkiem IE 8 i starszych.
var foo = {
bar : 123,
get bar(){ return bar; },
set bar( value ){ this.bar = value; }
};
foo.bar = 456;
var gaz = foo.bar;
Niestandardowe metody pobierające i ustawiające
get i set nie są słowami zastrzeżonymi, więc można je przeciążać w celu tworzenia własnych niestandardowych funkcji obliczanych właściwości w różnych przeglądarkach. To zadziała w każdej przeglądarce.
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' );
Lub dla bardziej zwartego podejścia, można użyć pojedynczej funkcji.
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' );
Unikaj robienia czegoś takiego, co może prowadzić do rozdęcia kodu.
var foo = {
_a : 123, _b : 456, _c : 789,
getA : function(){ return this._a; },
getB : ..., getC : ..., setA : ..., setB : ..., setC : ...
};
W powyższych przykładach nazwy właściwości wewnętrznych są wyabstrahowane podkreśleniem, aby zniechęcić użytkowników do prostego działania foo.bar vs. foo.get( 'bar' )i uzyskiwania wartości „niegotowanej”. Możesz użyć kodu warunkowego, aby wykonać różne czynności w zależności od nazwy właściwości, do której uzyskujesz dostęp (za pośrednictwem nameparametru).
Object.defineProperty ()
Użycie Object.defineProperty()jest innym sposobem dodawania metod pobierających i ustawiających i może być używane na obiektach po ich zdefiniowaniu. Może być również używany do ustawiania konfigurowalnych i wyliczalnych zachowań. Ta składnia działa również z IE 8, ale niestety tylko w przypadku obiektów 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 __ ()
Wreszcie __defineGetter__()jest inna opcja. Jest przestarzały, ale nadal jest szeroko stosowany w sieci, więc prawdopodobnie nie zniknie w najbliższym czasie. Działa na wszystkich przeglądarkach oprócz IE 10 i starszych. Chociaż inne opcje działają również dobrze w wersji innej niż IE, więc ta nie jest tak przydatna.
var foo = { _bar : 123; }
foo.__defineGetter__( 'bar', function(){ return this._bar; } );
foo.__defineSetter__( 'bar', function( value ){ this._bar = value; } );
Warto również zauważyć, że w tych ostatnich przykładach nazwy wewnętrzne muszą być inne niż nazwy akcesorów, aby uniknąć rekursji (tj. foo.barWywoływanie foo.get(bar)wywoływania foo.barwywoływania foo.get(bar)...).
Zobacz też
MDN get , set ,
Object.defineProperty () , __defineGetter __ () , __defineSetter __ () Obsługa
MSDN
IE8 Getter