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
,
let website = {};
Object.defineProperty[website, 'name', {
value: 'homiedev',
}];
console.log[website]; // {}
0, let website = {};
Object.defineProperty[website, 'name', {
value: 'homiedev',
}];
console.log[website]; // {}
1, let website = {};
Object.defineProperty[website, 'name', {
value: 'homiedev',
}];
console.log[website]; // {}
2, và let website = {};
Object.defineProperty[website, 'name', {
value: 'homiedev',
}];
console.log[website]; // {}
3 nhé. 😄😄.Object Properties và attributes của nó trong object JavaScript như configurable
, writable
, let website = {};
Object.defineProperty[website, 'name', {
value: 'homiedev',
}];
console.log[website]; // {}
0, let website = {};
Object.defineProperty[website, 'name', {
value: 'homiedev',
}];
console.log[website]; // {}
1, let website = {};
Object.defineProperty[website, 'name', {
value: 'homiedev',
}];
console.log[website]; // {}
2, và let website = {};
Object.defineProperty[website, 'name', {
value: 'homiedev',
}];
console.log[website]; // {}
3 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ụ:
let website = {};
Object.defineProperty[website, 'name', {
value: 'homiedev',
}];
console.log[website]; // {}
4.Object Properties được bao quanh bởi hai cặp dấu ngoặc vuông, ví dụ: let website = {};
Object.defineProperty[website, 'name', {
value: 'homiedev',
}];
console.log[website]; // {}
4.Data Property trong JavaScript
Một data property có 4 attributes:4 attributes:
5 - 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ửlet website = {}; Object.defineProperty[website, 'name', { value: 'homiedev', }]; console.log[website]; // {}
6 hay không.let website = {}; Object.defineProperty[website, 'name', { value: 'homiedev', }]; console.log[website]; // {}
7 - ảnh hưởng đến một số hoạt động [vd nhưlet website = {}; Object.defineProperty[website, 'name', { value: 'homiedev', }]; console.log[website]; // {}
8,let website = {}; Object.defineProperty[website, 'name', { value: 'homiedev', }]; console.log[website]; // {}
9]. Nếu nó là false, thì những hoạt động đó sẽ bỏ qua thuộc tính.let website = {}; Object.defineProperty[website, 'name', { value: 'homiedev', }]; console.log[website]; // {}
0 - xác định xem value của một data property có thể được thay đổi hay không..console.log[Object.getOwnPropertyDescriptors[website]]; // hoặc console.log[Object.getOwnPropertyDescriptor[website,'name']];
1 - chứa giá trị của thuộc tính.console.log[Object.getOwnPropertyDescriptors[website]]; // hoặc console.log[Object.getOwnPropertyDescriptor[website,'name']];
Các thuộc tính
let website = {};
Object.defineProperty[website, 'name', {
value: 'homiedev',
}];
console.log[website]; // {}
5 , let website = {};
Object.defineProperty[website, 'name', {
value: 'homiedev',
}];
console.log[website]; // {}
7 và console.log[Object.getOwnPropertyDescriptors[website]];
// hoặc
console.log[Object.getOwnPropertyDescriptor[website,'name']];
0 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
console.log[Object.getOwnPropertyDescriptors[website]];
// hoặc
console.log[Object.getOwnPropertyDescriptor[website,'name']];
5.Method
console.log[Object.getOwnPropertyDescriptors[website]];
// hoặc
console.log[Object.getOwnPropertyDescriptor[website,'name']];
5 yêu cầu ba đối số:- object.
- Tên thuộc tính của object.
- object chứa attribute:
configurable
,
0,let website = {}; Object.defineProperty[website, 'name', { value: 'homiedev', }]; console.log[website]; // {}
writable
, và
3 [giá trị mặc địnhlet website = {}; Object.defineProperty[website, 'name', { value: 'homiedev', }]; console.log[website]; // {}
configurable
,
0,let website = {}; Object.defineProperty[website, 'name', { value: 'homiedev', }]; console.log[website]; // {}
writable
là false và
3 là undefined.let website = {}; Object.defineProperty[website, 'name', { value: 'homiedev', }]; console.log[website]; // {}
Giờ chúng ta thử tạo một object bằng
console.log[Object.getOwnPropertyDescriptors[website]];
// hoặc
console.log[Object.getOwnPropertyDescriptor[website,'name']];
5: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: {
value: "homiedev"
writable: false,
enumerable: false
configurable:false
}
}
6? Thực ra object {
name: {
value: "homiedev"
writable: false,
enumerable: false
configurable:false
}
}
7 lúc này đã có thuộc tính {
name: {
value: "homiedev"
writable: false,
enumerable: false
configurable:false
}
}
6, tuy nhiên khi sử dụng {
name: {
value: "homiedev"
writable: false,
enumerable: false
configurable:false
}
}
9, bạn có thể hiểu rằng {
name: {
value: "homiedev"
writable: false,
enumerable: false
configurable:false
}
}
9 sẽ hiển thị những thuộc tính là enumerable. Trong trường hợp này {
name: {
value: "homiedev"
writable: false,
enumerable: false
configurable:false
}
}
6 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: {
value: "homiedev"
writable: false,
enumerable: false
configurable:false
}
}
6 khi dùng {
name: {
value: "homiedev"
writable: false,
enumerable: false
configurable:false
}
}
9.Để biết đã có thuộc tính
{
name: {
value: "homiedev"
writable: false,
enumerable: false
configurable:false
}
}
6 hay chưa, chúng ta có thể xem bằng cách sử dụng let website = {};
Object.defineProperty[website, 'name', {
value: 'homiedev',
enumerable: true // set lại giá trị
}];
console.log[website]; // {name: "homiedev"} 😄
5 hoặc let website = {};
Object.defineProperty[website, 'name', {
value: 'homiedev',
enumerable: true // set lại giá trị
}];
console.log[website]; // {name: "homiedev"} 😄
6: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
}
}
Để
{
name: {
value: "homiedev"
writable: false,
enumerable: false
configurable:false
}
}
9 hiển thị {
name: {
value: "homiedev"
writable: false,
enumerable: false
configurable:false
}
}
6 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: {
value: "homiedev"
writable: false,
enumerable: false
configurable:false
}
}
6 xem kết quả như nào nhé 😁.Sử dụng từ khóa
let website = {};
Object.defineProperty[website, 'name', {
value: 'homiedev',
}];
console.log[website]; // {}
6 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: {
value: "homiedev"
writable: false,
enumerable: false
configurable:false
}
}
6, 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
let website = {};
Object.defineProperty[website, 'name', {
value: 'homiedev',
}];
console.log[website]; // {}
5, let website = {};
Object.defineProperty[website, 'name', {
value: 'homiedev',
}];
console.log[website]; // {}
7, 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"}
7 và 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"}
8.Khi bạn đọc dữ liệu từ một thuộc tính của accessor property, hàm
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"}
7 sẽ tự động được gọi để trả về một giá trị. giá trị trả về mặc định của hàm 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"}
7 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
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"}
8 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
Đặ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ụ:
4.let website = {}; Object.defineProperty[website, 'name', { value: 'homiedev', }]; console.log[website]; // {}
Data Property trong JavaScript
Một data property có 4 attributes: