首页 > 其他分享 >Proxy

Proxy

时间:2023-01-04 23:45:27浏览次数:35  
标签:name Reflect Proxy key receiver target

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中的代码
*/

标签:name,Reflect,Proxy,key,receiver,target
From: https://www.cnblogs.com/hyf120/p/17026327.html

相关文章