Cảm ơn bạn!
Tìm hiểu Object Properties trong JavaScript
Trong hướng dẫn này, chúng ta cùng tìm hiểu về Object Properties và attributes của nó trong object JavaScript như configurable
, writable
, enumerable
, get
, set
, và value
nhé. 😄😄.
Object Properties trong JavaScript
Trong JavaScript, có hai loại thuộc tính đối tượng:
- data property
- accessor property
Đặc điểm của thuộc tính đối tượng - Object Properties được bao quanh bởi hai cặp dấu ngoặc vuông, ví dụ: [[đặc điểm của thuộc tính]]
.
Data Property trong JavaScript
Một data property có 4 attributes:
[[configurable]]
- xác định xem các attribute có thể được cài đặt lại hoặc loại bỏ property thông qua toán tửdelete
hay không.[[enumerable]]
- ảnh hưởng đến một số hoạt động (vd nhưObject.assign ()
,for...in
). Nếu nó là false, thì những hoạt động đó sẽ bỏ qua thuộc tính.[[writable]]
- xác định xem value của một data property có thể được thay đổi hay không..[[value]]
- chứa giá trị của thuộc tính.
Các thuộc tính [[configurable]]
, [[enumerable]]
và [[writable]]
có giá trị mặc định true cho tất cả các thuộc tính mà chúng ta tạo ra trên một đối tượng. Giá trị mặc định của thuộc tính [[value]] là undefined.
Ví dụ:
let person = {
name: 'Minh',
age: 22
};
Để thay đổi bất kỳ attribute nào của một thuộc tính, bạn cần sử dụng method Object.defineProperty()
.
Method Object.defineProperty()
yêu cầu ba đối số:
- object.
- Tên thuộc tính của object.
- object chứa attribute:
configurable
,enumerable
,writable
, vàvalue
(giá trị mặc địnhconfigurable
,enumerable
,writable
là false vàvalue
là undefined.
Giờ chúng ta thử tạo một object bằng Object.defineProperty()
:
let website = {};
Object.defineProperty(website, 'name', {
value: 'homiedev',
});
console.log(website); // {}
Tại sao ở ví dụ trên lại trả về object trống, mặc dù mình đã set giá trị cho name
? Thực ra object website
lúc này đã có thuộc tính name
, tuy nhiên khi sử dụng console.log()
, bạn có thể hiểu rằng console.log()
sẽ hiển thị những thuộc tính là enumerable. Trong trường hợp này name
có enumerable mặc định là false (non-enumerable) cho nên chúng ta sẽ không nhìn thấy thuộc tính name
khi dùng console.log()
.
Để biết đã có thuộc tính name
hay chưa, chúng ta có thể xem bằng cách sử dụng Object.getOwnPropertyDescriptors()
hoặc Object.getOwnPropertyDescriptor()
:
console.log(Object.getOwnPropertyDescriptors(website));
// hoặc
console.log(Object.getOwnPropertyDescriptor(website,'name'));
Kết quả:
{
name: {
value: "homiedev"
writable: false,
enumerable: false
configurable:false
}
}
Để console.log()
hiển thị name
thì chúng ta sẽ đưa thuộc tính này về enumerable bằng cách đặt lại thuộc tính này giá trị true.
let website = {};
Object.defineProperty(website, 'name', {
value: 'homiedev',
enumerable: true // set lại giá trị
});
console.log(website); // {name: "homiedev"} 😄
Có thêm thì sẽ có lúc cần xóa, bây giờ chúng ta thử xóa thuộc tính name
xem kết quả như nào nhé 😁.
Sử dụng từ khóa delete
trong JavaScript để xóa một thuộc tính.
let website = {};
Object.defineProperty(website, 'name', {
value: 'homiedev',
enumerable: true
});
delete website.name; // xóa thuộc tính khỏi object
console.log(website); {name: "homiedev"}
Kết quả như bạn thấy là chúng ta không thể xóa thuộc tính name
, lý do là vì mặc định configurable
là false, configurable
sẽ ngăn cản việc xóa thuộc tính này.
Để xóa thì chúng ta set configurable
thành true là được:
let website = {};
Object.defineProperty(website, 'name', {
value: 'homiedev',
enumerable: true,
configurable: true
});
delete website.name; // xóa thuộc tính khỏi object
console.log(website); {} 😋
Accessor Property trong JavaScript
accessor property trong JavaScript có các thuộc tính [[configurable]]
, [[enumerable]]
, [[get]]
và [[set]]
.
Khi bạn đọc dữ liệu từ một thuộc tính của accessor property, hàm [[get]]
sẽ tự động được gọi để trả về một giá trị. giá trị trả về mặc định của hàm [[get]]
là undefined.
Nếu bạn gán một giá trị cho một thuộc tính của accessor property, thì hàm [[set]]
sẽ tự động được gọi.
let person = {
name: 'Minh',
address: 'TP. HCM'
}
Object.defineProperty(person, 'information', {
get: function () {
return this.name + ', địa chỉ: ' + this.address;
},
set: function (value) {
let parts = value.split(' ');
if (parts.length == 2) {
this.name = parts[0];
this.address = parts[1];
} else {
throw 'Dữ liệu đầu vào phải có dạng "name address"';
}
}
});
console.log(person.information); // "Minh, địa chỉ: TP. HCM"
person.information = "Tú KonTum";
console.log(person.information); // "Tú, địa chỉ: KonTum"
Như vậy qua bài viết này chúng ta đã tìm hiểu được:
-
Các đối tượng JavaScript có hai loại thuộc tính:
- data property
- accessor property
-
JavaScript sử dụng ký hiệu
[[...]]
để mô tả các đặc điểm của thuộc tính như[[configurable]]
,[[enumerable]]
,[[writable]]
, ... -
Method
Object.getOwnPropertyDescriptor()
trả về mô tả attribute của một thuộc tính trong một đối tượng. -
Một thuộc tính có thể được định nghĩa thông qua các methods
Object.defineProperty()
hoặcObject.defineProperties()
. Các methods có thể được sử dụng để thay đổi các attribute của một thuộc tính.