オブジェクトの操作(get/set等)をインターセプトする
// ── Proxy: オブジェクトの操作をインターセプト(監視・変更)──
// target: 元のオブジェクト, handler: 操作をカスタマイズするオブジェクト
const user = { name: '田中', age: 25 };
const proxy = new Proxy(user, {
// get: プロパティの読み取りを監視
get(target, key) {
console.log('読み取り:', key);
return Reflect.get(target, key); // 元の値を返す
},
// set: プロパティへの書き込みを監視・バリデーション
set(target, key, value) {
if (key === 'age' && typeof value !== 'number') {
throw new TypeError('age は数値でないといけません');
}
if (key === 'age' && value < 0) {
throw new RangeError('age は 0 以上でないといけません');
}
return Reflect.set(target, key, value); // 元のオブジェクトに書き込む
},
});
proxy.name; // 読み取り: name
proxy.age = 30; // OK
proxy.age = -1; // ❌ RangeError
// ── Reflect: オブジェクト操作のユーティリティ集 ─────
Reflect.has(user, 'name'); // true ← 'name' in user と同じ
Reflect.ownKeys(user); // ['name', 'age'] ← Object.keys より多い(Symbolも含む)
Reflect.deleteProperty(user, 'age'); // delete user.age と同じVueのリアクティビティシステムやORMのバリデーションに使われる強力なメタプログラミング機能。Reflectは対応するデフォルト操作を提供する。