Proxy – Javascript中的代理器

Proxy 這個詞的原意是代理，用在這里表示由它來“代理”某些操作，可以譯為“代理器”

let d=new Proxy(target,handle);

Proxy 對象的所有用法，都是上面這種形式，不同的只是handler參數的寫法。
其中，

• new Proxy()表示生成一個Proxy實例，
• target參數表示所要攔截的目標對象，
• handler參數也是一個對象，用來定制攔截行為。

Proxy 可以理解成，在目標對象之前架設一層“攔截”，外界對該對象的訪問，都必須先通過這層攔截，因此提供了一種機制，可以對外界的訪問進行過濾和改寫

作為構造函數，Proxy接受兩個參數:

• 第一個參數是所要代理的目標對象（上例是一個空對象），即如果沒有Proxy的介入，操作原來要訪問的就是這個對象；
• 第二個參數是一個配置對象，對于每一個被代理的操作，需要提供一個對應的處理函數，該函數將攔截對應的操作。

如果handler沒有設置任何攔截，那就等同于直接通向原對象。

另外Proxy 實例也可以作為其他對象的原型對象。

Proxy的攔截操作列表

get操作
get(target, propKey, receiver)：攔截對象屬性的讀取，比如proxy.foo和proxy[‘foo’]。

get方法用于攔截某個屬性的讀取操作，可以接受三個參數，依次為目標對象、屬性名和 proxy 實例本身（嚴格地說，是操作行為所針對的對象，也就是所謂的接收器），其中最后一個參數可選。

get方法可以繼承。

set操作

set方法用來攔截某個屬性的賦值操作，可以接受四個參數，依次為

• 目標對象
• 屬性名
• 屬性值
• Proxy 實例本身

其中最后一個參數可選。

set操作一般用于對于要賦值的數進行過濾,加工或是權限設置

<script src="https://unpkg.com/vue@next"></script>
<script>
    //定義對象數據
    let a = {
        value: 1
    };
    let b = {
        value: 2
    };

    //定義處理器
    handleA = {
        //get是對象的屬性值返回的方法
        //get語法將對象屬性綁定到查詢該屬性時將被調用的函數。
        get(target, prop) {//對象a，value
            console.log(`${target[prop]}獲取A：${prop}的值`)
            return target[prop]
        },
        //set是屬性值修改的方法
        //當嘗試設置屬性時，set語法將對象屬性綁定到要調用的函數。
        set(target, key, value) {//對象a，value， 設置的值
            console.log(`設置A：${key}的值為${value}`)
        }
    }
    handleB = {
        get(target, prop) {
            console.log(`獲取B：${prop}的值`)
            return target[prop]
        },
        set(target, key, value) {
            console.log(`設置B：${key}的值為${value}`)
        }
    }

    let pa = new Proxy(a, handleA)
    let pb = new Proxy(b, handleB)
    let sum = pa.value + pb.value;//第一次執行
    console.log("第一次打印，sum的值是：", sum)

    pa.value = 3;
    console.log(`簡簡單單的測試：`, a.value)
    pb.value = 4;
    console.log("第二次打印，sum的值是：", sum)


    //打印對象
    console.log(JSON.stringify(a))
</script>

實例

可以打開瀏覽器控制臺，觀察打印的數值

參考文章

• CSDN