Proxy 是 ES6 新增的方法，用 Proxy 將物件包裝起來後，往後在操作此物件時都必須經過 Proxy，因此可以理解成攔截或是代理。

Proxy

Proxy 基本語法為：

let proxy = new Proxy(target, handler)

當中的 target、handler 代表：

• target ：要被代理的物件。
• handler ：代理過後要做的行為，包含 construct、get、set 等等。

以下是簡易範例：

let dog = {
    name: '來福',
    age: 6
}

dog = new Proxy(dog, {
    
    get(target, prop, receiver){
        // ...
    },
    set(target, prop, value, receiver){
        // ...
    }
})

handler 中除了 get、set 外還包含了 ownKeys、getOwnPropertyDescriptor、deleteProperty、isExtensible、apply 等方法，不過這篇文章只先筆記 get & set 兩種。

get

get 是取得屬性時會觸發的方法，從上面的範例中可以看到 get 帶了三個參數，分別是：

• target：目標對象。
• prop：目標屬性。
• receiver：Proxy 本身。

實際將這些參數 log 出來：

get(target, prop, receiver){
    console.log(`target: ${target}`)
    console.log(`prop: ${prop}`)
    console.log(receiver)
}

// 觸發 get
dog['name']

既然知道三者代表的意思，我們可以設定某個值、或是某條件、私有變數禁止存取等。

get(target, prop, receiver){
    if(prop === 'name'){
        return "您無存取權限"
    }
},

set

set 在設定屬性時觸發，參數有四個：

set(target, prop, value, receiver){
    // ...
}

分別代表：

• target：目標對象。
• prop：目標屬性。
• prop：目標屬性的值。
• receiver：Proxy 本身。

用法和 get 類似，不過在結束時要 return 一個布林代表成功及失敗，避免發生 TypeError。

dog = new Proxy(dog, {
    set(target, prop, value, receiver){
        target[prop] = value
        return true
    }
})

dog['nickName'] = '小笨狗'

this

一旦使用了 proxy 代理 target，target 的 this 就會指向 proxy。

const obj = {
    get: function () {
        console.log(this === proxy)
    }
}

const proxy = new Proxy(obj, {})

obj.get()   // false
proxy.get() // true

參考資料

• Proxy 和 Reflect
• 一起來了解 Javascript 中的 Proxy 與 Reflect
• ES6 Proxy用法详解
• MDN - Proxy