Trình truy cập đối tượng JavaScript
Trình truy cập JavaScript (Getters và Setters)
ECMAScript 5 (ES5 2009) đã giới thiệu Getter và Setters.
Getters và setters cho phép bạn xác định Trình truy cập đối tượng (Thuộc tính được tính toán).
JavaScript Getter (Từ khóa get)
Ví dụ này sử dụng thuộc tính lang
để get
giá trị của thuộc tính language
.
Ví dụ
// 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;
Hãy tự mình thử »Trình thiết lập JavaScript (Từ khóa đã đặt)
Ví dụ này sử dụng thuộc tính lang
để set
giá trị cho thuộc tính language
.
Ví dụ
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;
Hãy tự mình thử » Hàm JavaScript hay Getter?
Sự khác biệt giữa hai ví dụ này là gì?
ví dụ 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();
Hãy tự mình thử »Ví dụ 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;
Hãy tự mình thử »Ví dụ 1 truy cập fullName dưới dạng hàm: Person.fullName().
Ví dụ 2 truy cập fullName dưới dạng thuộc tính: user.fullName.
Ví dụ thứ hai cung cấp một cú pháp đơn giản hơn.
Chất lượng dữ liệu
JavaScript có thể đảm bảo chất lượng dữ liệu tốt hơn khi sử dụng getters và setters.
Trong ví dụ này, sử dụng thuộc tính lang
sẽ trả về giá trị của thuộc tính language
ở dạng chữ hoa:
Ví dụ
// 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;
Hãy tự mình thử » Trong ví dụ này, sử dụng thuộc tính lang
sẽ lưu trữ giá trị chữ hoa trong thuộc tính language
:
Ví dụ
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;
Hãy tự mình thử »Tại sao nên sử dụng Getters và Setters?
- Nó cho cú pháp đơn giản hơn
- Nó cho phép cú pháp bằng nhau cho các thuộc tính và phương thức
- Nó có thể đảm bảo chất lượng dữ liệu tốt hơn
- Nó rất hữu ích để làm những việc ở hậu trường
Object.defineProperty()
Phương thức Object.defineProperty()
cũng có thể được sử dụng để thêm Getters và Setters:
Một ví dụ về bộ đếm
// Define object
const obj = {counter : 0};
// Define setters and getters
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;
Hãy tự mình thử »