Trình truy cập đối tượng JavaScript
Trình truy cập JavaScript (Người nhận và Người lập trình)
ECMAScript 5 (ES5 2009) giới thiệu Getter và Setters.
Getters và setters cho phép bạn xác định các Trình truy cập Đối tượng (Thuộc tính Tính toán).
JavaScript Getter (Từ khóa lấy)
Ví dụ này sử dụng một thuộc langtính cho get
giá trị của thuộc languagetính.
Thí 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;
JavaScript Setter (Tập hợp Từ khoá)
Ví dụ này sử dụng một thuộc langtính cho set
giá trị của thuộc languagetính.
Thí 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à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();
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;
Ví dụ 1 truy cập fullName dưới dạng một hàm: person.fullName ().
Ví dụ 2 truy cập fullName dưới dạng thuộc tính: person.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.
langTrong ví dụ này, việc sử dụng thuộc tính trả về giá trị của thuộc languagetính ở dạng chữ hoa:
Thí 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;
Trong ví dụ này, việc sử dụng thuộc langtính sẽ lưu trữ giá trị chữ hoa trong thuộc languagetính:
Thí 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;
Tại sao sử dụng Getters và Setters?
- Nó cung cấp cú pháp đơn giản hơn
- Nó cho phép cú pháp bình đẳng 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 Object.defineProperty()pháp này cũng có thể được sử dụng để thêm Getters và Setters:
Ví dụ về bộ đếm
// 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;