Aus John Resigs frühen Artikeln, grob übersetzt als Referenz.
Erfreulicherweise kann ich endlich sagen: „Heutzutage werden die Getter und Setter von JavaScript sehr häufig verwendet und sie stehen in engem Zusammenhang mit den lebenswichtigen Interessen jedes JavaScript-Entwicklers.“ Verdammt, ich habe lange darauf gewartet, das zu sagen.
Lassen Sie uns zunächst einen kurzen Blick darauf werfen, was Getter und Setter sind und warum sie nützlich sind. Schauen wir uns dann an, welche Plattformen derzeit Gettets und Setters unterstützen.
Getter und Setter
Getter und Setter ermöglichen es Ihnen, die Daten eines Objekts schnell abzurufen oder festzulegen. Im Allgemeinen verfügt ein Objekt über zwei Methoden, mit denen ein bestimmter Wert abgerufen und festgelegt wird, z. B.:
{
getValue: function(){
return this._value;
},
setValue: function(val){
this._value = val;
}
}Ein offensichtlicher Vorteil beim Schreiben von JavaScript auf diese Weise ist: Sie können damit Eigenschaften ausblenden dass Sie keinen direkten Zugang zu Außenstehenden wünschen. Der endgültige Code sieht wie folgt aus (unter Verwendung eines Abschlusses, um den Wert des neu erstellten Field-Objekts zu speichern):
function Field(val){
var value = val;
this.getValue = function(){
return value;
};
this.setValue = function(val){
value = val;
};
}Wir können ihn also so verwenden:
var field = new Field("test");
field.value
// => undefined
field.setValue("test2")
field.getValue()
// => "test2"Let's simulieren Für das „hidden value attribute“ im obigen Beispiel sieht unser Code so aus:
function Field(val){
var value = val;
this.__defineGetter__("value", function(){
return value;
});
this.__defineSetter__("value", function(val){
value = val;
});
}Sie schreiben jedoch nicht gerne so, sondern definieren lieber Getter und Setter (private Variablen). ) im Prototyp des Objekts (es spielt keine Rolle, wo Sie es schreiben), können wir eine andere Syntax verwenden.
function Field(val){
this.value = val;
}
Field.prototype = {
get value(){
return this._value;
},
set value(val){
this._value = val;
}
};Diese Syntax scheint unglaublich, aber nachdem man sie eine Weile verwendet hat, ist es leicht, sie zu akzeptieren.
Das Folgende ist ein weiteres Beispiel, das es der Außenwelt ermöglicht, ein Benutzernamen-Array abzurufen, jedoch nicht das ursprüngliche, versteckte Benutzerobjekt.
function Site(users){
this.__defineGetter__("users", function(){
// JS 1.6 Array map()
return users.map(function(user){
return user.name;
});
};
}Als Bonus habe ich eine Methode geschrieben, die Ihnen bei der Implementierung der Objektvererbung helfen kann und auch Getter und Setter berücksichtigt
// Helper method for extending one object with another
function extend(a,b) {
for ( var i in b ) {
var g = b.__lookupGetter__(i), s = b.__lookupSetter__(i);
if ( g || s ) {
if ( g )
a.__defineGetter__(i, g);
if ( s )
a.__defineSetter__(i, s);
} else
a[i] = b[i];
}
return a;
}In meiner Methode „extend()“ haben Sie Ich werde zwei neue Methoden finden: __lookupGetter__ und __lookupSetter__. Dies wird nützlich sein, wenn Sie tatsächlich anfangen, Getter und Setter zu verwenden.
Als ich zum Beispiel zum ersten Mal die Methode „extend()“ schrieb, stieß ich auf verschiedene Fehler und mir war völlig schwindelig. Später fand ich heraus, dass das Problem in einer einfachen Aussage liegt: a[i] = b[i];
Wenn Objekt a einen Setter namens i hat, Objekt b einen Getter namens i hat, wird a[i] nicht zugewiesen durch andere Setter-Methoden, aber von der Getter-Methode von b. Mit diesen beiden __lookup*__-Methoden können Sie die ursprüngliche Funktion erhalten. (Dieser Absatz ist etwas unklar, der Originaltext lautet wie folgt)
Wenn in Objekt a ein Setter mit dem Namen i und in Objekt b ein Getter mit dem Namen i vorhanden wäre, wäre der Wert von a[i]. wurde nicht auf die andere Setter-Funktion, sondern auf den berechneten Wert aus der Getter-Funktion von b gesetzt. Mit den beiden __lookup*__-Methoden können Sie auf die ursprünglichen Funktionen zugreifen, die für die Methoden verwendet wurden (und so beispielsweise eine effektive Erweiterungsmethode schreiben). ).
Beachten Sie die folgenden Punkte:
Innerhalb eines Objekts kann jede Variable nur einen Getter oder Setter haben. (Wert kann also einen Getter und einen Setter haben, aber der Wert hat nie zwei Getter)
Die einzige Möglichkeit, einen Getter oder Setter zu löschen, ist: Objekt[Name] löschen. delete kann einige allgemeine Eigenschaften, Getter und Setter löschen.
Wenn Sie __defineGetter__ oder __defineSetter__ verwenden, überschreibt es den zuvor definierten Getter oder Setter mit demselben Namen, sogar die Eigenschaft.
Plattform
Unterstützte Browser sind:
Firefox
Safari 3+
Opera 9.5
(Im Originaltext wurde Chrome nicht erwähnt, es ist noch nicht erhältlich)
Ich verwende das folgender Code Testbrowser:
javascript:foo={get test(){ return "foo"; }};alert(foo.test);Darüber hinaus unterstützen die folgenden beiden Engines auch Getter und Setter:
SpiderMonkey
Rhino 1.6R6 (Neu)
Mehr JavaScript-Getter und Setters Eine ausführliche Einführung in die Unterstützung der Setters-Plattform und verwandte Artikel finden Sie auf der chinesischen PHP-Website!
