Comparison of proxy and Object.defineProperty
Advantages of proxy
1. More object operations can be monitored (delete operations and method calls in objects, etc.)
defineProperty can only monitor the reading and writing of properties
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
*/
Other extended operation methods:
| handler method | Trigger method |
|---|---|
| get | Read an attribute |
| set | Write an attribute |
| has | in operator |
| deleteProperty | delete operator |
| 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 | Call a function |
| construct | Call a function with new |
Two, proxy supports operations on array objects
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 ]
*/
Three, do not need to invade the object
The proxy will not perform any operations on the original object, but will read and write to the internal object
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~';