Phương thức getOwnPropertyDescriptors trong JavaScript
Một trong những tính năng mới từ đặc tả ECMAScript 2017 cho JavaScript là phương thức getOwnPropertyDescriptors . Tóm lại, phương thức này trả về thông tin cho tất cả các thuộc tính của đối tượng đã cho bao gồm thông tin về getters và setters. Nó cho phép ta tạo bản sao của các đối tượng và sao chép nó trong khi sao chép tất cả các thuộc tính, bao gồm cả getters và setters.
Trong JavaScript, ta có thể tạo các thuộc tính đặc biệt hoạt động như các phương thức bên trong đối tượng và hoạt động như một thuộc tính bên ngoài nó. Chúng được gọi là get và set .
// object with get and set properties
const gator = {
name: 'Ben',
type: 'reptilian',
get fullName(){
return `${this.name}${this.type}`;
},
set gatorName(name){
this.name = name;
}
};
Nếu ta sử dụng console.log(gator) ta sẽ chỉ nhận được tên và kiểu. Tuy nhiên, ta vẫn có quyền truy cập vào getter fullName, mặc dù thực tế là nó không hiển thị trong console .
console.log(gator) // {name: 'Ben', type: 'reptilian',}
console.log(gator.fullName) // 'Benreptilian'
Lưu ý ta gọi getter giống như nó là một thuộc tính thông thường, không phải là một phương thức.
Nhân bản đối tượng
Ta sử dụng Object.assign() để sao chép các đối tượng trong javaScript. Nếu bạn chưa quen với phương thức Object.assign, vui lòng đọc bài viết về cách quản lý các đối tượng trong JavaScript. Vấn đề chính với phương pháp này là khi ta sao chép các đối tượng, kết quả không chính xác như ta mong đợi. Phương pháp này không hoạt động với getters và setters.
const cayman = {Object.assign({}, gator};
console.log(cayman) // {name: 'Ben', type: 'reptilian', fullName: Benreptilian, gatorName: undefined }
Vì vậy, getter và setter trở thành các giá trị thông thường. Và nếu getter là một giá trị bị phản đối, setter sẽ không được xác định.
Thay vào đó, hãy sao chép đối tượng bằng phương thức getOwnPropertyDescriptors .
const crocodilian = Object.defineProperties({}, Object.getOwnPropertyDescriptors(gator)));
Và bây giờ ta hãy so sánh các bộ mô tả của từng đối tượng mà ta có:
console.log(Object.getOwnPropertyDescriptors(gator));
/* name: {value:'Ben', writable: true, enumerable: true, configurable: true},
type: {value:'reptilian', writable: true, enumerable: true, configurable: true},
fullName: {get: f, set: undefined, enumerable: '', configurable: ''},
gatorName: {get: undefined, set: f, enumerable: '', configurable: ''},
*/
console.log(Object.getOwnPropertyDescriptors(cayman));
/* name: {value:'Ben', writable: true, enumerable: true, configurable: true},
type: {value:'reptilian', writable: true, enumerable: true, configurable: true},
fullName: {value: 'Benreptilian', writable: true, enumerable: '', configurable: ''},
gatorName: {value: undefined, writable: true, enumerable: '', configurable: ''},
*/
console.log(Object.getOwnPropertyDescriptors(crocodilian));
/* name: {value:'Ben', writable: true, enumerable: true, configurable: true},
type: {value:'reptilian', writable: true, enumerable: true, configurable: true},
fullName: {get: f, set: undefined, enumerable: '', configurable: ''},
gatorName: {get: undefined, set: f, enumerable: '', configurable: ''},
*/
gator thuộc tính đối tượng 's name và type được định nghĩa là các thuộc tính bình thường, nhưng FullName và gatorName được định nghĩa là phương thức getter và setter. Chúng không có trường value , nhưng có trường get và set . Đối tượng getter và setter của cayman bây giờ được mô tả như các giá trị thông thường. Và với đối tượng crocodilian ta quản lý để lưu các getters và setters của nó, nhờ getOwnPropertyDescriptors .
Phương thức getOwnPropertyDescriptors giúp tránh mất dữ liệu và với nó, ta có thể tạo bản sao sâu của các đối tượng mà không cần dựa vào một chức năng tiện ích khác.
Các tin liên quan
Cây tìm kiếm nhị phân thông qua JavaScript2020-03-03
Tree Traversal qua JavaScript
2020-03-02
Hiểu về Trình tạo trong JavaScript
2020-02-28
Triển khai Thành phần Tab từ Scratch trong Vanilla JavaScript
2020-02-24
Khám phá cây qua JavaScript
2020-02-23
Giới thiệu về danh sách được liên kết qua JavaScript - Phần 2: Triển khai
2020-02-23
Khám phá các và hàng đợi qua JavaScript
2020-02-23
Câu hỏi phỏng vấn JavaScript: Gotchas phổ biến
2020-02-21
Giới thiệu về danh sách được liên kết qua JavaScript - Phần 1: Tổng quan
2020-02-21
Hiểu Radix Sắp xếp Thông qua JavaScript
2020-02-18
