Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Thiết Lập Thuộc Tính Object Trong Javascript

Thiết Lập Thuộc Tính Object Trong Javascript


Ngày 21 Tháng 5 Năm 2020

Hôm nay bạn hãy cùng mình đi vào tìm hiểu về khái niệm cũng như cách sử dụng các thuộc tính nâng cao của object trong ngôn ngữ lập trình Javascript để phát triển web nhé.

Như đã học ở các bài trước, object được hiểu đơn giản là nơi lưu dữ liệu theo cặp giá trị là key-value (thuộc tính- giá trị) với thuộc tính được dùng để chúng ta thêm, sửa, xóa giá trị trong đối tượng. Thì trong bài hôm nay chúng ta sẽ đi vào tìm hiểu sâu hơn về các tính chất của thuộc tính trong object để có thể linh hoạt trong việc thiết lập và xử lý dữ liệu trong Javascript.

Nếu bạn muốn tham khảo thêm về object thì xem ở đây nhé. Còn bây giờ chúng ta sẽ cùng nhau tìm hiểu nào!

Phương Thức Object.getOwnPropertyDescriptor() Trong Javascript

Trước khi đi vào tìm hiểu tính chất của thuộc tính trong object thì mình sẽ giới thiệu cách giúp chúng ta có thể xem được các tính chất của thuộc tính đó trong object.

Khi chúng ta tạo thuộc tính bằng cách thông thường thì các tính chất của thuộc tính trong object đều được thiết lập mặc định với giá trị là true. Do đó bạn cần sử dụng phương thức Object.getOwnPropertyDescriptor() để xem được toàn bộ thông tin của một thuộc tính trong đối tượng cụ thể (object). Bây giờ chúng ta sẽ đi vào tìm hiểu cú pháp của nó nhé:

 let tinhChat = Object.getOwnPropertyDescriptor(Đối tượng, Tên thuộc tính);

Để dễ hình dùng thì chúng ta sẽ đi vào ví dụ lấy tính chất của thuộc tính ten trong đối tượng khachHang ở dưới đây nhé:

Đoạn Code:

 let khachHang = {ten: "Lan"};
let tinhChat = Object.getOwnPropertyDescriptor(khachHang, "ten");
console.log(tinhChat);

Kết Quả:

Sử dụng Object.getOwnPropertyDescriptor()

Ở đây mình có vài lưu ý sau:

  • configurable: Nếu là true thì chúng ta có thể xóa hay thiết lập lại các tính chất của thuộc tính đó, ngược lại thì không được phép.
  • enumerable : Nếu là true thì thuộc tính đó sẽ được trả về trong vòng lặp, ngược lại nó sẽ không xuất hiện trong vòng lặp .
  • writable : Nếu là true thì giá trị của thuộc tính đó có thể thay đổi, ngược lại giá trị đó chỉ có thể đọc (Không thể thay đổi).
  • value: Chứa giá trị của thuộc tính đó.

Phương Thức Object.defineProperty() Trong Javascript

Sau khi đã xem được các thông tin của một thuộc tính, thì tiếp theo chúng ta sẽ đi vào cách thiết lập giá trị cho những tính chất mặc định đó trong javascript bằng phương thức Object.defineProperty(). Bây giờ bạn cùng mình tìm hiểu cú pháp của nó sau đây nhé:

 Object.defineProperty(Đối Tượng, Thuộc Tính, Tính Chất);

Bây giờ để dễ hình dung chúng ta cùng nhau đi vào ví dụ chi tiết sau đây nhé:

Đoạn Code:

 let khachHang = {ten: "Lan"};
Object.defineProperty(khachHang, "ten", {writable: false});
let tinhChat = Object.getOwnPropertyDescriptor(khachHang, "ten");
console.log(tinhChat);

Kết Quả:

Sử dụng Object.defineProperty()

Ngoài ra bạn cũng có thể sử dụng phương thức Object.defineProperty() kết hợp với tính chất value để thiết lấp giá trị cho thuộc tính trong object. Để hiểu rõ hơn bạn xem ví dụ sau đây nhé:

Đoạn Code:

 let khachHang = {};
Object.defineProperty(khachHang, "ten", { value : "Lan"});
let tinhChat = Object.getOwnPropertyDescriptor(khachHang, "ten");
console.log(tinhChat);

Kết Quả:

Sử dụng Object.defineProperty() để xác định Value

Mình có lưu ý là khi bạn khi thiết lập tính chất cho thuộc tính bằng Object.defineProperty() thì những tính chất mà không được chúng ta khai báo thì sẽ mặc định là false . Để dễ hình dung bạn xem đoạn code sau nhé:

Đoạn Code:

 let khachHang = { };
Object.defineProperty(khachHang, 'ten', {value: "Lan", writable:true});
console.log(Object.getOwnPropertyDescriptor(khachHang, 'ten'));

Kết Quả:

Object.defineProperty ví dụ 2

Sau khi nắm xong cách xem thông tin và thiết lập tính chất cho thuộc tính trong object thì tiếp theo chúng ta sẽ đi vào tìm hiểu chi tiết cách sử dụng của tính chất đó ở bên dưới nhé.

Tính Chất writable Trong Thuộc Tính Object

Khi bạn chuyển tính chất writable sang false thì chúng ta sẽ không thể gán bất cứ giá trị nào cho thuộc tính đó trong object. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let khachHang = { ten: "Lan" };
Object.defineProperty(khachHang, 'ten', {writable: false});
khachHang.ten = "Hưng";
console.log(khachHang.ten);

Kết Quả:

Sử dụng writeable trong object

Như bạn thấy thì giá trị của thuộc tính ten sẽ không thay đổi khi chúng ta gán giá trị khác vào cho thuộc tính đó.

Tính Chất enumerable Trong Thuộc Tính Object

Nếu chúng ta thiết lập giá trị false cho tính chất enumerable của thuộc tính trong object thì nó sẽ không được hiển thị trong vòng lặp. Để hiểu rõ hơn chúng ta sẽ đi vào ví dụ lấy các thuộc tính của object bằng vong lặp for...in thông qua ví dụ dưới đây nhé:

Đoạn Code:

 let khachHang = {
  ten: "Lan",
  ho: "Nguyễn",
  gioiTinh: "Nữ"
};
Object.defineProperty(khachHang, 'gioiTinh', {enumerable: false});

for (let thuocTinh in khachHang) console.log(thuocTinh);

Kết Quả:

Sử dụng enumerable trong defineProperty

Như bạn thấy thì khi chúng ta thiết lập giá trị enumerable: false cho thuộc tính gioiTinh thì nó sẽ bị ẩn đi trong vòng lặp.

Tính Chất configurable Trong Thuộc Tính Object

Khi ta gán giá trị false cho tính chất configurable thì thuộc tính đó sẽ không thể thiết lập lại dù chúng ta có sử dụng phương thức Object.defineProperty. Để nắm rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let khachHang = {};
Object.defineProperty(khachHang, {value: "Lan"}, {configurable: false}, {writable: false});

/*Xác định lại thuộc tính */
Object.defineProperty(khachHang, {value: "An"}, {writable: true});
console.log(Object.getOwnPropertyDescriptor(khachHang, "ten"));

Kết Quả:

Sử dụng enumerable trong defineProperty

Như bạn thấy thì nó sẽ xảy ra lỗi khi chúng ta muốn thiết lập thuộc tính ten trong đối tượng khachHang.

Getter Và Setter Trong Object

Getter và setter được giới thiệu trong phiên bản ECMAScript 5.
Với getter cho phép chúng ta liên kết thuộc tính của object tới một hàm để đọc giá trị của thuộc tính khi được gọi.
Còn setter cũng liên kết thuộc tính của object tới một hàm nhưng để gán giá trị cho thuộc tính khi được gọi.

Để hiểu rõ hơn chúng ta cùng nhau đi vào tìm hiểu cú pháp của nó nhé:

 let Đối Tượng = {
  get Tên Thuộc Tính {
     /*Đoạn mã gán giá trị cho thuộc tính*/
  },
  set Tên Thuộc Tính(Giá Trị) {
     /*Đoạn mã gán giá trị*/
  }
}

Nếu cảm thấy khó hiểu thì bạn yên tâm nhé vì khi đi vào ví dụ cụ thể thì chúng ta sẽ dễ hình dung và dễ hiểu hơn.

Ví dụ getter trong object:

Bây giờ mình có một đối tượng là khachHang với hai thuộc tính là tenho. Chúng ta sẽ đọc giá trị của các thuộc tính đó và lưu lại với thuộc tính là hoTen để xuất ra màn hình. Và để nắm rõ hơn bạn xem đoạn code sau nhé:

Đoạn Code:

 let khachHang = {
  ho: "Nguyễn",
  ten: "Lan",
  get hoTen() {
    return `Họ tên khách hàng là ${this.ho} ${this.ten}`;
  }
};
console.log(khachHang.hoTen)

Kết Quả:

Getter trong object javascript

Như bạn thấy thì chúng ta có thể dễ dàng lấy giá trị của các thuộc tính trong object bằng phương thức get. Nó giúp cho đoạn code của bạn ngắn gọn hơn cũng như đảm bảo an toàn cho dữ liệu.

Ví dụ setter trong object:

Tiếp theo chúng ta sẽ sử dụng setter để gán giá trị cho thuộc tính hoTen thông qua ví dụ dưới đây nhé:

Đoạn Code:

 let khachHang = {
  ho: "Nguyễn",
  ten: "Lan",
  get hoTen() {
    return `Họ tên khách hàng là ${this.ho} ${this.ten}`;
  },
  set hoTen(giaTri) {
     [this.ho, this.ten] = giaTri.split(" ");
  }
};

khachHang.hoTen = "Đỗ An";
console.log(khachHang.hoTen);

Kết Quả:

Getter và setter trong object javascript

Như bạn thấy thì chúng ta bây giờ có thể gán bất kỳ giá trị nào để thay thế giá trị mặc định của thuộc tính hoten trong đối tượng khachHang. Và mình có một số lưu ý ví dụ trên là phương thức split() giúp chúng ta tách chuỗi thành mảng. Còn cách gán biến như ví dụ trên thì bạn có thể tham khảo thêm ở đây nhé.

Tính chất của thuộc tính sử dụng getter và setter

Khi thuộc tính trong object sử dụng phương thức getter và setter thì nó sẽ có các tính chất sau:

  • get: Là một hàm với không tham số được truyền vào để đọc giá trị thuộc tính.
  • set: Là một hàm với một tham số được truyền vào để gán giá trị cho thuộc tính.
  • enumerable : Nếu là true thì thuộc tính đó sẽ được trả về trong vòng lặp, ngược lại nó sẽ không xuất hiện trong vòng lặp.
  • configurable : Nếu là true thì chúng ta có thể xóa hay thiết lập lại các tính chất của thuộc tính đó, ngược lại thì không được phép.

Như kết luận trên thì chúng ta có thể thấy là nó sẽ không chứa hai tính chất của một thuộc tính thông thường trong object là writablevalue. Do đó khi bạn gán giá trị bằng cách thông thường thì nó sẽ xảy ra lỗi trong việc đọc giá trị thuộc tính bằng phương thức get. Để hiểu rõ hơn bạn xem ví dụ sau nhé:

Đoạn Code:

 let khachHang = {
  ho: "Nguyễn",
  ten: "Lan",
  get hoTen() {
    return `Họ tên khách hàng là ${this.ho} ${this.ten}`;
  }
};
khachHang.hoTen = "Đỗ Hưng";
console.log(khachHang.hoTen)

Kết Quả:

Getter error trong object javascript

Như bạn thấy là chúng ta không thể gán giá trị bằng cách thông thường vì bây giờ tính chất của thuộc tính trong object này không tồn tại writable. Sau đây để dễ hiểu hơn thì chúng ta sẽ đi vào xem tất cả tính chất của thuộc tính trong object đó ở ví dụ trên thông qua đoạn code sau đây nhé:

Đoạn Code:

 let khachHang = {
  ho: "Nguyễn",
  ten: "Lan",
  get hoTen() {
    return `Họ tên khách hàng là ${this.ho} ${this.ten}`;
  }
};
console.log(Object.getOwnPropertyDescriptor(khachHang, "hoTen"));

Kết Quả:

Getter setter Descriptor trong object javascript

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn hiểu được khái niệm cũng như cách sử dụng các thuộc tính nâng cao của object trong ngôn ngữ Javascript và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!