JavaScript-objektoebehore
JavaScript-toebehore (Getters en Setters)
ECMAScript 5 (ES5 2009) het Getter en Setters bekendgestel.
Getters en setters laat jou toe om Object Accessors (Computed Properties) te definieer.
JavaScript Getter (Die kry sleutelwoord)
Hierdie voorbeeld gebruik 'n lang
eiendom tot get
die waarde van die language
eiendom.
Voorbeeld
// 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 (Die stel sleutelwoord)
Hierdie voorbeeld gebruik 'n lang
eiendom tot set
die waarde van die language
eiendom.
Voorbeeld
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-funksie of getter?
Wat is die verskille tussen hierdie twee voorbeelde?
Voorbeeld 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();
Voorbeeld 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;
Voorbeeld 1 kry toegang tot volle Naam as 'n funksie: persoon.volleNaam().
Voorbeeld 2 toegang tot volle Naam as 'n eiendom: persoon.volle Naam.
Die tweede voorbeeld verskaf 'n eenvoudiger sintaksis.
Data kwaliteit
JavaScript kan beter datakwaliteit verseker wanneer getters en setters gebruik word.
Deur die lang
eiendom in hierdie voorbeeld te gebruik, gee die waarde van die language
eiendom in hoofletters:
Voorbeeld
// 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;
Deur die lang
eiendom in hierdie voorbeeld te gebruik, stoor 'n hoofletterwaarde in die language
eiendom:
Voorbeeld
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;
Waarom word getters en setters gebruik?
- Dit gee eenvoudiger sintaksis
- Dit laat gelyke sintaksis toe vir eienskappe en metodes
- Dit kan beter datakwaliteit verseker
- Dit is nuttig om dinge agter die skerms te doen
Object.defineProperty()
Die Object.defineProperty()
metode kan ook gebruik word om Getters en Setters by te voeg:
'n Teenvoorbeeld
// 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;