Proxy

Posted 2023-03-26 转角90

Object.defineProperty

缺陷：
1. 设计的初衷不是为了监听一个对象中的所有属性，初衷是定义普通的属性
2. 无法对新增属性、删除属性进行监听

Proxy 代理对象

/*
const p = new Proxy(obj,)
*/
const obj = 
    name:\'hyf\',
    age:18,
    height:1.88


const p = new Proxy(obj,
    set:function(target,key,newValue)
        target[key] = newValue
    ,
    get: function(target,key)
        return target[key]
	,
    has:function(target,key)
        return key in target
	,
    deleteProperty: function(target,key)
        delete target[key]
    ,
)

console.log(p.name)
p.name = \'myl\'
console.log(p.name)

function Foo()

let fooProxy = new Proxy(Foo,
    // 监听函数apply
    apply(target,thisArg,otherArgs)
        return target.apply(thisArg,otherArgs)
    ,
    // 监听函数new
    construct(target,argArray,newTarget)
        return new target()
    
)

fooProxy.apply()
new fooProxy()

捕获器

• get(target,key,)：属性读取操作的捕获器
• set(target,key,newValue,)：属性读取操作的捕获器
• has(target,key,) : in 操作符的捕获器
• deleteProperty(target,key,)：delete操作符的捕获器

Reflect

操作JavaScript对象的方法，类似Object操作对象的方法。
为什么出现？
1. 早期没有考虑到对对象本身操作如何设计更加规范，全部放到Object上
2. Object是一个构造函数，放在Object上不合适
3. 类似in/delete，会让js开起来有些奇怪
4. 因此ES6新增Reflect对象，让这些操作集中到Reflect上
5. 在使用Proxy时，可以做到不操作原对象

常见方法

• Reflect.has(target,prop)
• Reflect.get(target,prop,[receiver])
• Reflect.set(target,prop,value,[receiver])
• Reflect.deleteProperty(target,prop)

const obj = 
    name:\'hyf\',
    age:18,
    height:1.88


const p = new Proxy(obj,
    set:function(target,key,newValue,receiver)
        // 1. 不再直接操作原对象
        // 2. 可以获取是否操作成功
        // 3. receiver就是外存Proxy对象 p===receiver
        let flag = Reflect.set(target,key,newValue,receiver)
        if (!flag) 
            throw new Error(\'修改失败\')
        
    ,
    get: function(target,key,receiver)
        return Reflect.get(target,key,receiver)
	,
)
/*
receiver: 改变obj中getter/setter访问器中的this指向
obj = 
	_name:\'ds\',
	set name(value)
		this._name = value
	,
	get name()
		return this._name
	

*/

/*
Reflect.construct(Super，[args],Student)   Super.apply(this,[args])
创建的是Student类型，执行的是Super中的代码
*/