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