【TypeScript】proxy 和 Reflect

proxy （代理） 和 Reflect （反射） 参数一样。

基本用法

let person = { name: 'xx', age: 20}
// proxy 支持对象，数组，函数，set，map
// 代理对象的常用模式：前面一个对象，后面一个对象用于描述前面的对象
person.name // 取值
person.name = 'xxx' // 赋值
let personProxy = new Proxy(person, {// 拦截取值get() {},// 拦截赋值 person name xxxset(target, key, value, receiver) {return true},// 拦截函数调用apply() {},// 拦截 in 操作符has () {},// 拦截 for in ownKeys() {},// 拦截 new 操作符construct() {},// 拦截删除的操作deleteProperty(target, p) {}
})

let person = { name: 'xx', age: 20 }
// 输出 age 的值
// console.log(Reflect.get(person, 'age', person)); 
// 修改 age 的值，返回 true
// console.log(Reflect.set(person, 'age', 23, person));let personProxy = new Proxy(person, {get(target, key, receiver) {if (target.age < 18) {return Reflect.get(target, key, receiver)} else {return "xx 成年了"}}
})
// age:17 输出：17  age:20 输出：xx 成年了
console.log(personProxy.age);

实现观察者模式（简易版）

// 存储回调函数（观察者）的集合
const list: Set<Function> = new Set()
const autorun = (cb: Function) => {if (!list.has(cb)) {list.add(cb)}
}
const observable = <T extends object>(params: T) => {return new Proxy(params, {set(target, key, value, receiver) {const result = Reflect.set(target, key, value, receiver)list.forEach(fn => fn())return result}})
}
// personProxy 对象被创建，开始时 list 为空。
const personProxy = observable({ name: 'xx', attr: "newbee" })
autorun(() => {console.log("有变换了");
})
// 输出两遍 有变化了
// 修改 personProxy.attr 属性，触发 Proxy 的 set 方法，该方法会遍历 list 集合并调用已注册的回调函数，输出 "有变化了"
personProxy.attr = "no-newbee"
personProxy.name = 'xxx'