プロキシとObject.definePropertyの比較

プロキシとObject.definePropertyの比較

プロキシの利点

1.より多くのオブジェクト操作を監視できます（オブジェクトの削除操作やメソッド呼び出しなど）

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



*/

その他の拡張操作方法：

ハンドラーメソッド	トリガー方式
取得する	属性を読む
セットする	属性を書く
持っている	演算子で
deleteProperty	削除演算子
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（）
適用する	関数を呼び出す
構築する	新しい関数を呼び出す

2つ目は、プロキシが配列オブジェクトの操作をサポートしていることです。

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 ]

*/

三、オブジェクトに侵入する必要はありません

プロキシは元のオブジェクトに対して操作を実行しませんが、内部オブジェクトの読み取りと書き込みを行います

const person ={
    
    }
const personProxy = new Proxy(person,{
    
    
    get(target ,property){
    
    
        return target[property]
    },
    set(target,property,value){
    
    
        target[property] = value
    }
})

反関定義プロパティ

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