[JavaScript] Bài 22 - Reflect & Proxy

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ế để bổ trợ cho Reflect, 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ột proxy bao quanh target với các phương thức tương tác được cung cấp bởi handler.

var sky = { color: 'royalblue', age: 1001
}; var skyHandler = { /* intercepting methods */ }; var proxiedSky = new Proxy(sky, skyHandler);
console.log(proxiedSky.age); // 1001

Ở đây chúng ta có thể viết các phương thức cho handler để thay đổi cách thức tương tác giữa sky và code sử dụng phía bên ngoài. Một handler đượ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ủa Reflect và có thể được bổ trợ bởi Reflect để có thể tương tác với sky linh hoạt hơ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)

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';

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.

(Sắp đăng tải) [JavaScript] Bài 23 - Imperative & Declarative