proxy 与 Object.defineProperty 的比较

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