proxy 与 Object.defineProperty 的比较
程序员文章站
2022-07-12 21:54:00
...
proxy 与 Object.defineProperty 的比较
proxy的优势
一、可以监视到更多的对象操作(delete 操作 和 对象中的方法调用等)
defineProperty 只能监视属性的读写
const stu = {
name : 'tianqin',
gender : 'female',
age: ' 8'
}
const proxyStu = new Proxy( stu ,{
deleteProperty(target ,property){
console.log('delete',property);
delete target[property]
}
})
delete proxyStu.age
console.log(stu)
/*
这是输出后的内容 ,可以看到 age 属性已经被删掉了
[nodemon] restarting due to changes...
[nodemon] starting `node .\proxy.js`
delete age
{ name: 'tianqin', gender: 'female' }
[nodemon] clean exit - waiting for changes before restart
*/
其他拓展操作方法:
handler方法 | 触发方式 |
---|---|
get | 读取某个属性 |
set | 写入某个属性 |
has | in操作符 |
deleteProperty | delete操作符 |
getProperty | Object.getPropertypeOf( ) |
setProperty | Object.setPropertypeOf( ) |
isExtensible | Object.isExtensible( ) |
preventExtensions | Object.preventExtensions( ) |
getOwnPropertyDescriptor | Object.getOwnPropertyDescriptor( ) |
defineProperty | Object.defineProperty( ) |
ownKeys | Object.keys( ) \ Object.getOwnPropertyNames( ) \ Object.getOwnPropertySymbols( ) |
apply | 调用一个函数 |
construct | 用new调用一个函数 |
二、proxy支持对数组对象的操作
const arr = []
const arrProxy = new Proxy(arr,{
set(target , property ,value) {
console.log('set',property, value)
target[property] = value;
return true;
}
})
arrProxy.push(100);
arrProxy.push(100);
console.log(arr)
/*
输出结果:
set 0 100
set length 1
set 1 100
set length 2
[ 100, 100 ]
*/
三、不需要侵入对象
proxy 不会对原对象进行任何操作,就会对内部对象进行读写
const person ={}
const personProxy = new Proxy(person,{
get(target ,property){
return target[property]
},
set(target,property,value){
target[property] = value
}
})
反关defineProperty
const obj = {}
Object.defineProperty(obj , 'name',{
get(){
console.log('the name has been updated!')
return obj.__name;
},
set(value){
console.log('the name has been set')
obj._name = value
}
})
Object.defineProperty(obj , 'age',{
get(){
console.log('the age has been updated!')
return obj._age;
},
set(value){
console.log('the age has been set')
obj._age = value
}
})
obj.name = 'tianqin~';
下一篇: acwing每日一题:剪绳子