Akcesory obiektów JavaScript
Akcesory JavaScript (gettery i settery)
ECMAScript 5 (ES5 2009) wprowadził Getter i Settery.
Gettery i settery umożliwiają zdefiniowanie akcesorów obiektów (właściwości obliczanych).
Getter JavaScript (Słowo kluczowe get)
Ten przykład używa langwłaściwości do get
wartości languagewłaściwości.
Przykład
// 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;
Seter JavaScript (ustawione słowo kluczowe)
Ten przykład używa langwłaściwości do set
wartości languagewłaściwości.
Przykład
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;
Funkcja JavaScript czy Getter?
Jakie są różnice między tymi dwoma przykładami?
Przykład 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();
Przykład 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;
Przykład 1 dostęp fullName jako funkcji: person.fullName().
Przykład 2 dostęp fullName jako właściwość: person.fullName.
Drugi przykład zapewnia prostszą składnię.
Jakość danych
JavaScript może zapewnić lepszą jakość danych podczas korzystania z metod pobierających i ustawiających.
Użycie langwłaściwości, w tym przykładzie, zwraca wartość languagewłaściwości wielkimi literami:
Przykład
// 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;
Korzystając z langwłaściwości, w tym przykładzie, przechowuje we właściwości wartość pisaną wielką literą language:
Przykład
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;
Dlaczego warto korzystać z getterów i seterów?
- Daje prostszą składnię
- Pozwala na równą składnię dla właściwości i metod
- Może zapewnić lepszą jakość danych
- Przydaje się do robienia rzeczy zakulisowych
Object.defineProperty()
Metodę Object.defineProperty()można również wykorzystać do dodawania getterów i seterów:
Przykład licznika
// 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;