JavaScript-Objektzugriffsmethoden
JavaScript-Zugriffsmethoden (Getter und Setter)
ECMAScript 5 (ES5 2009) führte Getter und Setter ein.
Getter und Setter ermöglichen es Ihnen, Objektzugriffsmethoden (berechnete Eigenschaften) zu definieren.
JavaScript-Getter (Das get-Schlüsselwort)
In diesem Beispiel wird eine langEigenschaft für get
den Wert der languageEigenschaft verwendet.
Beispiel
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return this.language;
}
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;
JavaScript Setter (das set-Schlüsselwort)
In diesem Beispiel wird eine langEigenschaft für set
den Wert der languageEigenschaft verwendet.
Beispiel
const person = {
firstName: "John",
lastName: "Doe",
language: "",
set lang(lang) {
this.language = lang;
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
JavaScript-Funktion oder Getter?
Was ist der Unterschied zwischen diesen beiden Beispielen?
Beispiel 1
const person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " +
this.lastName;
}
};
// Display data from the object using a method:
document.getElementById("demo").innerHTML = person.fullName();
Beispiel 2
const person = {
firstName: "John",
lastName: "Doe",
get fullName() {
return this.firstName + " " +
this.lastName;
}
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;
Beispiel 1 Zugriff auf fullName als Funktion: person.fullName().
Beispiel 2 Zugriff auf fullName als Eigenschaft: person.fullName.
Das zweite Beispiel bietet eine einfachere Syntax.
Datenqualität
JavaScript kann eine bessere Datenqualität bei der Verwendung von Gettern und Settern sicherstellen.
Die Verwendung der langEigenschaft gibt in diesem Beispiel den Wert der languageEigenschaft in Großbuchstaben zurück:
Beispiel
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return this.language.toUpperCase();
}
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;
Die Verwendung der langEigenschaft speichert in diesem Beispiel einen Wert in Großbuchstaben in der languageEigenschaft:
Beispiel
const person = {
firstName: "John",
lastName: "Doe",
language: "",
set lang(lang) {
this.language = lang.toUpperCase();
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
Warum Getter und Setter verwenden?
- Es gibt eine einfachere Syntax
- Es ermöglicht gleiche Syntax für Eigenschaften und Methoden
- Es kann eine bessere Datenqualität sicherstellen
- Es ist nützlich, um Dinge hinter den Kulissen zu erledigen
Object.defineProperty()
Die Object.defineProperty()Methode kann auch verwendet werden, um Getter und Setter hinzuzufügen:
Ein Gegenbeispiel
// Define object
const obj = {counter : 0};
// Define setters
Object.defineProperty(obj, "reset", {
get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
set : function (value) {this.counter -= value;}
});
// Play with the counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;