当前位置：首页 > news >正文

学习ts（十二）Proxy与Reflect

news 2025/6/23 15:04:23

定义

Proxy

为开发者提供了拦截并向基本操作嵌入额外行为的能力。具体的说，可以给目标对象定义一个关联的代理对象，而这个代理对象可以作为抽象的目标对象来使用。在对目标对象的各种操作影响目标对象之前，可以在代理对象中对这些操作加以控制。
用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于中“元编程”，即对编程语言进行编译。可以理解成在目标对象前架设一个“拦截”层，外界对该对象的访问都必须先通过这层拦截。
通过调用new Prosy(),你可以创建一个代理用来替代另一个对象，这个代理对目标对象进行了虚拟，因此该代理与该目标对象表面上可以被当做同一个对象来对待。

关键词

创建：代理对象是一个新对象
其他对象：只能代理对象

Reflect

将object对象的一些明显属于语言内部的方法（比如：Object.defineProperty）放到Reflect上。现阶段，某些方法同时在Object和Reflect上部署，未来的新方法只会在Reflect上部署。从Reflect可以拿到语言内部的方法。
修改某些方法的返回值，让其变得合理
Reflect对象的方法与Proxy对象的方法一一对应

方法

Reflect.get(target,name,receiver)
查找并返回target的name属性，没有则返回undefined

Reflect.set(target,name,value,receiver)
对象属性的设置，返回一个布尔值

Reflect.has(target,propKey)
propKey in proxy 操作，返回一个boolean值

Reflect.deleteProperty(target,name)
等同于delete obj[name]，用于删除对象属性

Reflect.construct(target,args)
等同于new target(...args)，这提供了一种不使用new来调用构造函数的方法

Reflect.getPrototypeOf(target)
用于读取对象的__proto__属性，对应Object.getPrototypeOf(obj)

Reflect.setPrototypeOf(target,prototype)
用于设置目标对象的原型（prototype）,对应Object.setPrototypeOf(obj,newProto)方法，返回一个boolean值，表示是否设置成功

Reflect.apply(target,thisArg,args)
等同于Function.prototype.apply.call(func,thisArg,args),用于绑定this对象后执行给定函数

Reflect.defineProperty(target,name,desc)
方法基本等同于Object,defineProperty,用来为对象定义属性，未来，后者会被逐渐替代

Reflect.getOwnPropertyDescriptor(target,name)
基本等同于Object.getOwnPropertyDescriptor，用于得到指定属性的描述对象，将来会替代掉后者

Reflect.isExtensible
对应Object.isExtensible，返回一个布尔值，表示当前对象是否可扩展。

Reflect.preventExtensions
对应Object.preventExtensions方法，用于让一个对象变为不可扩展。它返回一个布尔值，表示是否操作成功。

Reflect.ownKeys
方法用于返回对象的所有属性，基本等同于Object.getOwnPropertyNames与Object.getOwnPropertySymbols之和

数组倒序访问

var arr = [1, 2, 3, 4]
var proxy = new Proxy(arr, {get(target, propKey, receiver) {let nPropKey = parseInt(propKey as string) //解析字符串，返回整数if (nPropKey < 0) {if (Math.abs(nPropKey) <= target.length) { // 返回绝对值return target[target.length + nPropKey]} else {return '访问越界'}}return Reflect.get(target, propKey, receiver)}
})
console.log(proxy[-2])
console.log(proxy[-20])

实现观察者模式

const queuedObserverList:Set<Function> = new Set()
const observe = (fn:Function) => {queuedObserverList.add(fn)
}
const observable = (obj) => new Proxy(obj, {set(target, key, value, receiver) {queuedObserverList.forEach((fun) => fun())return Reflect.set(target, key, value, receiver)}
})const person = observable({ name: 'hello', age: 11 })
function print() {console.log(`${person.name}--${person.age}`)
}
observe(print)
person.name = 'hi'

keyof优化

module A {type Person = {name: string,age: number,sex: number}const proxy = (object: any, key: any) => {return new Proxy(object, {get(target, prop, receiver) {console.log('get')return Reflect.get(target, prop, receiver)},set(target, prop, value, receiver) {console.log('set')return Reflect.set(target, prop, value, receiver)}})}// const logAccess = (object: Person, key: 'name' | 'age' | 'sex') => {//     return proxy(object, key)// }const logAccess = <T>(object: T, key: keyof T) => {return proxy(object, key)}let woman: Person = logAccess({name: 'orange',sex: 0,age: 18}, 'age')woman.age = 16console.log(woman)
}