Pengakses Objek JavaScript
Aksesor JavaScript (Getter dan Setter)
ECMAScript 5 (ES5 2009) memperkenalkan Getter dan Setter.
Getter dan setter memungkinkan Anda untuk mendefinisikan Object Accessors (Computed Properties).
JavaScript Getter (Kata kunci get)
Contoh ini menggunakan langproperti untuk get
nilai languageproperti.
Contoh
// 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 (Set Kata Kunci)
Contoh ini menggunakan langproperti untuk set
nilai languageproperti.
Contoh
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;
Fungsi JavaScript atau Pengambil?
Apa perbedaan antara kedua contoh ini?
Contoh 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();
Contoh 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;
Contoh 1 mengakses fullName sebagai fungsi: person.fullName().
Contoh 2 mengakses fullName sebagai properti: person.fullName.
Contoh kedua memberikan sintaks yang lebih sederhana.
Kualitas data
JavaScript dapat mengamankan kualitas data yang lebih baik saat menggunakan getter dan setter.
Menggunakan langproperti, dalam contoh ini, mengembalikan nilai languageproperti dalam huruf besar:
Contoh
// 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;
Menggunakan langproperti, dalam contoh ini, menyimpan nilai huruf besar di languageproperti:
Contoh
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;
Mengapa Menggunakan Getter dan Setter?
- Ini memberikan sintaks yang lebih sederhana
- Ini memungkinkan sintaks yang sama untuk properti dan metode
- Itu dapat mengamankan kualitas data yang lebih baik
- Ini berguna untuk melakukan hal-hal di belakang layar
Objek.defineProperty()
Metode Object.defineProperty()ini juga dapat digunakan untuk menambahkan Getter dan Setter:
Contoh Penghitung
// 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;