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~';