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:

1. data property
2. 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:

1. [[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.
2. [[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.
3. [[writable]] - xác định xem value của một data property có thể được thay đổi hay không..
4. [[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ố:

1. object.
2. Tên thuộc tính của object.
3. object chứa attribute: configurable, enumerable, writable, và value (giá trị mặc định configurable, 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:

1. Các đối tượng JavaScript có hai loại thuộc tính:

   1. data property
   2. accessor property

2. JavaScript sử dụng ký hiệu [[...]] để mô tả các đặc điểm của thuộc tính như [[configurable]], [[enumerable]], [[writable]], ...

3. Method Object.getOwnPropertyDescriptor() trả về mô tả attribute của một thuộc tính trong một đối tượng.

4. Một thuộc tính có thể được định nghĩa thông qua các methods Object.defineProperty() hoặc Object.defineProperties(). Các methods có thể được sử dụng để thay đổi các attribute của một thuộc tính.