Trong bài viết này, chúng ta sẽ gặp một bộ công cụ được thiết kế để hỗ trợ các thao tác tạo ra sự thay đổi về kiến trúc và phương thức hoạt động của các object. Hãy cùng khởi đầu với object Reflect.
Reflect
Reflect là một object, không phải là một class hay một hàm khởi tạo - giống với Math mà chúng ta đã từng gặp khi làm việc với các giá trị số học. Các phương thức của Reflect đều là static và được thiết kế với các tính năng tập trung hỗ trợ cho các tác vụ thay đổi kiến trúc của các object.
Reflect.apply(target, thisArg, argumentList) - gọi hàm target như phương thức của một object được truyền vào vị trí thisArg và sử dụng mảng chứa các tham số argumentList.
var numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const addNonduplicate = function(value) {
var valueExisted = this.includes(value);
if (valueExisted)
return this;
else
return [...this, value];
}; // addNonduplicate
var newArray = Reflect.apply(addNonduplicate, numberArray, [9]);
console.log(newArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
var newArray = Reflect.apply(addNonduplicate, numberArray, [10]);
console.log(newArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Reflect.construct(target, argumentList) - ở đây target là một class không tên nhận được từ nguồn nào đó, và Reflect.construct sẽ thay thế cho cách viết new target(...argumentList).
var date = Reflect.construct(Date, ['1990/02/13']);
console.log(date); // Tue Feb 13 1990 00:00:00 GMT+0700 (Indochina Time)
Reflect.getOwnPropertyDescriptor(target, propertyKey) - truy vấn object mô tả thông tin về thuộc tính propertyKey của target.
var sky = {
color: 'royalblue',
age: 1001
};
var ageDescriptor = Reflect.getOwnPropertyDescriptor(sky, 'age');
console.log(ageDescriptor);
// {
// value: 1001, -> giá trị hiện tại của `sky.age`
// writable: true, -> có thể gán giá trị
// enumerable: true, -> có thể lặp
// configurable: true -> có thể xóa
// }
Reflect.defineProperty(target, proppertyKey, attributes) - định nghĩa hoặc ghi đè một thuộc tính của target. Trả về kết quả true nếu thao tác được thực hiện thành công, ngược lại trả về false.
var sky = { color: 'royalblue' };
var ageDescriptor = {
value: 1001,
writable: true,
enumerable: true,
configurable: true
};
var ageDefined = Reflect.defineProperty(sky, 'age', ageDescriptor);
console.log(ageDefined); // true
console.log(sky.age); // 1001
Reflect.deleteProperty(target, propertyKey) - xóa một thuộc tính của target. Trả về kết quả true nếu thao tác được thực hiện thành công, ngược lại trả về false.
var sky = {
color: 'royalBlue',
age: 1001
};
var ageDeleted = Reflect.deleteProperty(sky, age);
console.log(ageDeleted); // true
console.log(sky.age); // ReferenceError: age is not defined
Reflect.ownKeys(target) - truy vấn tên của tất cả các thuộc tính, bao gồm cả những thuộc tính sử dụng Symbol làm khóa truy vấn.
var sky = {
color: 'royalBlue',
age: 1001
};
var allKeys = Reflect.ownKeys(sky);
console.log(allKeys); // ['color', 'age']
Reflect.has(target, propertyKey) - kiểm tra sự có mặt của một thuộc tính trong target.
var sky = {
color: 'royalBlue',
age: 1001
};
var skyHasAge = Reflect.has(sky, 'age');
console.log(skyHasAge); // true
Reflect.get(target, propertyKey) - truy xuất giá trị một thuộc tính của target.
var sky = {
color: 'royalblue',
age: 1001
};
var skyAge = Reflect.get(sky, 'age');
console.log(skyAge); // 1001
Reflect.set(target, propertyKey, value) - gán giá trị value cho một thuộc tính của target. Trả về kết quả true nếu thao tác được thực hiện thành công, ngược lại trả về false.
var sky = {
color: 'royalblue',
age: 1001
};
var succeed = Reflect.set(sky, 'universe', 'tabha');
console.log(succeed); // true
console.log(sky.universe); // 'tabha'
Reflect.preventExtensions(target) - không để target có thể mở rộng thêm với thuộc tính mới. Trả về kết quả true nếu thao tác được thực hiện thành công, ngược lại trả về false.
var sky = {
color: 'royalblue',
age: 1001
};
var prevented = Reflect.preventExtensions(sky);
console.log(prevented); // true
sky.universe = 'tabha';
console.log(sky);
// { color: 'royalblue', age: 1001 }
Reflect.isExtensible(target) - kiểm tra để biết target có thể được bổ sung thuộc tính mới hay không.
var sky = {
color: 'royalblue',
age: 1001
};
var prevented = Reflect.preventExtensions(sky);
console.log(prevented); // true
var extensible = Reflect.isExtensible(sky);
console.log(extensible); // false
Proxy
Bên cạnh khả năng chỉnh sửa cấu trúc của một object bất kỳ do Reflect cung cấp, JavaScript còn có Proxy - một class được thiết kế để giúp chúng ta tạo ra một lớp vỏ bọc xung quanh object ban đầu và thay đổi cách thức tương tác giữa object đó và code sử dụng bên ngoài:
new Proxy(target, handler)- Tạo ra mộtproxybao quanhtargetvới các phương thức tương tác được cung cấp bởihandler. Ở đây chúng ta có thể viết các phương thức chohandlerđể thay đổi cách thức tương tác giữaskyvà code sử dụng phía bên ngoài. Mộthandlerđược JavaScript hỗ trợ định nghĩa với các phương thức cùng tên với các phương thức củaReflectvà có thể được bổ trợ bởiReflectđể có thể tương tác vớiskylinh hoạt hơn.-
handler.get(target, propertyKey)- Tạo ra một phương thứcgetterđể cung cấp logic đáp ứng khi code bên ngoài truy xuất tới các thuộc tính củatarget.
var sky = {
color: 'royalblue',
age: 1001
};
var handler = { };
handler.get = function(target, propertyKey) {
if (propertyKey == 'age')
return 'Outside of Time and Space';
else
return Reflect.get(target, propertyKey);
}; // handler.get
var proxiedSky = new Proxy(sky, handler);
console.log(proxiedSky.age);
// 'Outside of Time and Space';
Và dưới đây là danh sách các phương thức của handler để chúng ta có thể tạo ra lớp tương tác xung quanh target theo ý muốn.
handler.apply(target, thisArg, argumentList)handler.construct(target, argumentList)handler.getOwnPropertyDescriptor(target, propertyKey)handler.defineProperty(target, proppertyKey, attributes)handler.deleteProperty(target, propertyKey)handler.ownKeys(target)handler.has(target, propertyKey)handler.get(target, propertyKey)handler.set(target, propertyKey, value)handler.preventExtensions(target)handler.isExtensible(target)
Bài viết giới thiệu về Reflect & Proxy của chúng ta đến đây là kết thúc. Trong bài tiếp theo, chúng ta sẽ bắt đầu tìm hiểu sơ lược về các mô hình lập trình paradigm phổ biến - được hiểu nôm na là các phong cách định hướng tư duy khi xây dựng phần mềm.
