Proxy và Reflect là gì? Ứng dụng và hạn chế

Ví dụ

main.js · sửa được▶ Chạy

const target = { a: 1 }; const log = []; const p = new Proxy(target, { get(t, key, receiver) { log.push("get " + String(key)); return Reflect.get(t, key, receiver); }, set(t, key, value, receiver) { if (typeof value !== "number") throw new TypeError("number only"); return Reflect.set(t, key, value, receiver); }, }); p.b = 2; console.log(p.a + p.b, log); try { p.c = "x"; } catch (e) { console.log(e.message); } console.log(p === target, target.b);

• Trap set phải trả true nếu thành công; ở strict mode trả falsy sẽ ném TypeError.
• Dùng Reflect.* với receiver để getter/setter kế thừa và this hoạt động đúng.
• Có invariant: trap không được nói dối về property non-configurable, nếu không sẽ ném lỗi.

Hạn chế

• Chậm hơn truy cập trực tiếp, khó tối ưu; không nên đặt ở hot path.
• Proxy khác danh tính với target (p !== target); Map, Set, Date và private field #x dựa vào internal slot nên gọi method qua proxy bị TypeError nếu không bind lại.
• Không polyfill được hoàn toàn (nên Vue 3 bỏ IE11).