Proxy – Javascript中的代理器

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

let d=new Proxy(target,handle);

Proxy 對(duì)象的所有用法，都是上面這種形式，不同的只是handler參數(shù)的寫(xiě)法。
其中，

• new Proxy()表示生成一個(gè)Proxy實(shí)例，
• target參數(shù)表示所要攔截的目標(biāo)對(duì)象，
• handler參數(shù)也是一個(gè)對(duì)象，用來(lái)定制攔截行為。

Proxy 可以理解成，在目標(biāo)對(duì)象之前架設(shè)一層“攔截”，外界對(duì)該對(duì)象的訪問(wèn)，都必須先通過(guò)這層攔截，因此提供了一種機(jī)制，可以對(duì)外界的訪問(wèn)進(jìn)行過(guò)濾和改寫(xiě)

作為構(gòu)造函數(shù)，Proxy接受兩個(gè)參數(shù):

• 第一個(gè)參數(shù)是所要代理的目標(biāo)對(duì)象（上例是一個(gè)空對(duì)象），即如果沒(méi)有Proxy的介入，操作原來(lái)要訪問(wèn)的就是這個(gè)對(duì)象；
• 第二個(gè)參數(shù)是一個(gè)配置對(duì)象，對(duì)于每一個(gè)被代理的操作，需要提供一個(gè)對(duì)應(yīng)的處理函數(shù)，該函數(shù)將攔截對(duì)應(yīng)的操作。

如果handler沒(méi)有設(shè)置任何攔截，那就等同于直接通向原對(duì)象。

另外Proxy 實(shí)例也可以作為其他對(duì)象的原型對(duì)象。

Proxy的攔截操作列表

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

get方法用于攔截某個(gè)屬性的讀取操作，可以接受三個(gè)參數(shù)，依次為目標(biāo)對(duì)象、屬性名和 proxy 實(shí)例本身（嚴(yán)格地說(shuō)，是操作行為所針對(duì)的對(duì)象，也就是所謂的接收器），其中最后一個(gè)參數(shù)可選。

get方法可以繼承。

set操作

set方法用來(lái)攔截某個(gè)屬性的賦值操作，可以接受四個(gè)參數(shù)，依次為

• 目標(biāo)對(duì)象
• 屬性名
• 屬性值
• Proxy 實(shí)例本身

其中最后一個(gè)參數(shù)可選。

set操作一般用于對(duì)于要賦值的數(shù)進(jìn)行過(guò)濾,加工或是權(quán)限設(shè)置

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

    //定義處理器
    handleA = {
        //get是對(duì)象的屬性值返回的方法
        //get語(yǔ)法將對(duì)象屬性綁定到查詢?cè)搶傩詴r(shí)將被調(diào)用的函數(shù)。
        get(target, prop) {//對(duì)象a，value
            console.log(`${target[prop]}獲取A：${prop}的值`)
            return target[prop]
        },
        //set是屬性值修改的方法
        //當(dāng)嘗試設(shè)置屬性時(shí)，set語(yǔ)法將對(duì)象屬性綁定到要調(diào)用的函數(shù)。
        set(target, key, value) {//對(duì)象a，value， 設(shè)置的值
            console.log(`設(shè)置A：${key}的值為${value}`)
        }
    }
    handleB = {
        get(target, prop) {
            console.log(`獲取B：${prop}的值`)
            return target[prop]
        },
        set(target, key, value) {
            console.log(`設(shè)置B：${key}的值為${value}`)
        }
    }

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

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


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

實(shí)例

可以打開(kāi)瀏覽器控制臺(tái)，觀察打印的數(shù)值

參考文章

• CSDN