TÌm hiểu về Javascript Object

Bài đăng này đã không được cập nhật trong 5 năm

Các loại tính chất (Types of Properties)

Tính chất dữ liệu (Data Properties)

Bạn đã từng tạo vô số Object kiểu như thế này:

const obj = {
  name: 'Arfat',
  id: 5
}
obj.name 
// => 'Arfat'

Trong một Object obj, các tính chất (properties) name và id được gọi là các tính chất dữ liệu (Data Properties). Chúng là những tính chất cơ bản của hầu hết của Javascript code

Tính chất truy cập (Accessor Properties)

Chúng điều có thể được hiểu là getters và setters của các ngôn ngữ khác như C # hoặc Python. Tính chất truy cập là sự kết hợp của hai hàm: hàm get và hàm set.
Thay vì sử dụng cú pháp key: value truyền thống, chúng tôi sử dụng cú pháp sau -

const accessorObj = {
  get name() {
    return 'Arfat';
  }
};
accessorObj.name;
// => 'Arfat'
const dataObj = {
  name: 'Arfat',
};
dataObj.name;
// => 'Arfat'

Nhìn vào accessorObj và so sánh nó với dataObj. Có thể thấy ngay, chúng thể hiện hành vi tương tự. Chúng ta sử dụng từ khóa get và làm theo nó với một khai báo hàm. Đọc tính chất truy cập không cần sử dụng dấu ngoặc đơn để gọi hàm. Đó là, accessorObj.name (); là sai.
Khi chúng ta truy cập (đọc) accessorObj.name, hàm name được thực thi và giá trị trả về của nó trở thành giá trị cuối cùng của khóa tên.
Hàm get được gọi là getter vì nó liên quan đến việc lấy giá trị của khóa. Nếu bạn cập nhật accessorObj.name = 'New Person' , thì việc cập nhật đã xảy ra. Điều này là do chúng không có chức năng setter tương ứng cho khóa tên. Các hàm Setter giúp thiết lập các giá trị của các tính chất getter.

const accessorObj = {
  _name: 'Arfat',
  get name() {
    return this._name;
  },
  set name(value) {
    this._name = value;
  }
};

Hàm setter nhận giá trị được gán dưới dạng tham số. Bây giờ, bạn có thể lưu trữ giá trị trong tính chất hoặc một biến toàn cục. Trong trường hợp này, chúng tôi tạo một tính chất _ tên riêng tư (Private) của người dùng thông thường và lưu trữ giá trị tên trong đó.
Trong hàm getter, chúng ta có thể sửa đổi hoặc ghi đè tính chất trước khi trả về giá trị của nó. Ví dụ sau đây sẽ chứng minh điều này.

const obj = {
  get name() {
    return this._name.toUpperCase();
  },
  set name(value) {
    this._name = value;
  },
  get id() {
    return this._id.toString(2); // Returns binary of a number
  },
  set id(value) {
    this._id = value;
  }
}

obj.name = 'Arfat';
obj.name;
// => 'ARFAT'

obj.id = 5;
obj.id;
// => '101

Tại sao mọi người sẽ sử dụng tính chất truy cập nếu thuộc tính dữ liệu bình thường tồn tại? Thường có trường hợp bạn cần đăng nhập quyền truy cập thuộc tính hoặc duy trì lịch sử của tất cả các giá trị mà thuộc tính đã có. Các thuộc tính của truy cập cung cấp cho chúng ta toàn bộ sức mạnh của một hàm đển dễ dàng sử dụng của các thuộc tính đối tượng.

Object Property Descriptors

Property Attributes

Mỗi khóa của một đối tượng chứa một tập các thuộc tính thuộc tính xác định các đặc tính của giá trị được liên kết với khóa. Chúng cũng có thể được coi là siêu dữ liệu mô tả cặp khóa-giá trị. Tóm lại, các thuộc tính được sử dụng để xác định và giải thích trạng thái của các thuộc tính đối tượng.
Tập các thuộc tính thuộc tính được gọi là mô tả thuộc tính.
Tổng cộng, có sáu thuộc tính tài sản. Họ đang -

[[Value]]
[[Get]]
[[Set]]
[[Writable]]
[[Enumerable]]
[[Configurable]]
Tại sao chúng ta lại bọc tên thuộc tính trong [[]]? Dấu ngoặc vuông đánh dấu các thuộc tính bên trong được sử dụng bởi thông số kỹ thuật ECMA. Đây là các thuộc tính mà lập trình viên JS không thể chạm trực tiếp từ bên trong mã. Để thao tác các thuộc tính bên trong, chúng sử dụng các phương thức được cung cấp cho ngôn ngữ.
Hãy xem 1 ví dụ dưới đây
Trong hình trên, đối tượng có 2 key: x và y. Bạn có thể thấy danh sách các thuộc tính tương ứng được liên kết với mỗi thuộc tính.
Làm thế nào bạn có thể có được thông tin tương tự trong JavaScript? Chúng ta có thể sử dụng hàm Object.getOwnPropertyDescriptor để lấy thông tin đó. Nó nhận một đối tượng và một tên thuộc tính và trả về một đối tượng có chứa các thuộc tính cần thiết. Đây là code mẫu -

const object = {
  x: 5,
  y: 6
};
Object.getOwnPropertyDescriptor(object, 'x');
/* 
{ 
  value: 5, 
  writable: true, 
  enumerable: true, 
  configurable: true 
}
*/

Hãy cùng xem các thuộc tính chi tiết hơn.

`[[Value]]`

Nó lưu trữ giá trị được truy xuất bởi một quyền truy cập của tài sản. Điều đó có nghĩa là khi chúng ta thực hiện object.x trong ví dụ trên, chúng truy xuất thuộc tính [[Value]] của nó. Mọi quyền truy cập dấu chấm hoặc truy cập dấu ngoặc vuông của Data property sẽ hoạt động theo cách này.

`[[Get]]`

Nó lưu trữ tham chiếu đến hàm mà chúng ta khai báo trong khi tạo một thuộc tính getter. Nó được gọi một danh sách đối số trống để lấy giá trị thuộc tính mỗi khi quyền truy cập của thuộc tính được thực hiện.

`[[Set]]`

Nó lưu trữ tham chiếu đến hàm mà chúng ta khai báo trong khi tạo một thuộc tính setter. Nó được gọi với một danh sách đối số chứa giá trị được gán làm đối số duy nhất của nó mỗi khi thực hiện truy cập đã đặt của thuộc tính.

const obj = {
  set x(val) {
    console.log(val) 
    // => 23
  }
}
obj.x = 23;

Trong ví dụ trên, phía bên phải của phép gán được truyền dưới dạng đối số val cho hàm setter.

`[[Writable]]`

Đây là một giá trị boolean. Nó cho biết liệu chúng ta có thể ghi đè lên giá trị hay không. Nếu sai, các nỗ lực thay đổi giá trị thuộc tính sẽ không thành công.

`[[Enumerable]]`

Đây cũng là một giá trị boolean. Thuộc tính này cho biết liệu thuộc tính sẽ xuất hiện trong các vòng lặp for-in hay không. Nếu đúng, vòng lặp for-in sẽ có thể lặp lại trên thuộc tính này.

`[[Configurable]]`

Đây cũng là một giá trị boolean Khi nó sai -

Nỗ lực xóa property sẽ thất bại.
Ngoài ra, việc chuyển đổi Data Property thành Accessor Property hoặc ngược lại cũng sẽ thất bại. Đó là, chuyển đổi giữa hai loại property sẽ không thể thực hiện được.
Nó cũng sẽ ngăn thay đổi thêm các giá trị thuộc tính. Đó là, các giá trị hiện tại của enumerable, configurable, get hoặc set sẽ trở thành cố định. Hiệu quả của property này cũng phụ thuộc vào loại property.
Khi thuộc tính là Thuộc tính dữ liệu, bạn chỉ có thể đặt có thể ghi từ đúng thành sai.
Trước khi có thể ghi thành false, bạn cũng có thể thay đổi thuộc tính [[Giá trị]]. Tuy nhiên, một khi có thể ghi là sai và cấu hình cũng sai, thuộc tính trở nên không thể chỉnh sửa, không thể xóa và không thể thay đổi. Tất cả sáu thuộc tính không tồn tại cho từng loại property
Đối với Data Properties, chỉ tồn tại value, writable, enumerable and onfigurable
Đối với Accessor Properties, thay vì value và writable, là get và set
Link bài viết tham khảo: https://blog.bitsrc.io/diving-deeper-in-javascripts-objects-318b1e13dc12