学习ts(十二)Proxy与Reflect

定义

Proxy

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

关键词

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

Reflect

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

方法

Reflect.get(target,name,receiver)
查找并返回targetname属性,没有则返回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.getOwnPropertyNamesObject.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 = 16
    console.log(woman)
}

你可能感兴趣的:(typeScript,学习,原型模式)