JavaScript Proxy基本用法詳解

更新時(shí)間：2022年12月30日 09:32:56 作者：volit_

這篇文章主要介紹了JavaScript Proxy基本用法，Proxy對(duì)象用于創(chuàng)建一個(gè)對(duì)象的代理，從而實(shí)現(xiàn)基本操作的攔截和自定義，如屬性查找、賦值、枚舉、函數(shù)調(diào)用等

1.語(yǔ)法

const proxy = new Proxy(target, handle);

target，被代理的對(duì)象
handle，攔截規(guī)則

2.基本用法

const obj = {};
const proxy = new Proxy(obj, {
    // target 目標(biāo)對(duì)象；propKey 屬性名；receiver 實(shí)例本身；
    get: function(target, propKey, receiver) {
        return 10;
    }
})
console.log(proxy.a); // 10
console.log(proxy.b); // 10
console.log(obj.a); // undefined
console.log(obj.b); // undefined

? 以上代碼對(duì)obj對(duì)象的get操作進(jìn)行了攔截，任何讀取操作都僅會(huì)返回10，且該操作只作用在代理對(duì)象proxy上，對(duì)原對(duì)象本身是不起作用的。

ps.若obj對(duì)象是不可寫(xiě)及不可配置的，代理對(duì)象的返回值要與被代理對(duì)象的返回值保持一致；若被代理對(duì)象沒(méi)有配置get方位方法，即get方法是undefined，那么返回值必須是undefined

handle對(duì)象的常用方法：

方法	描述
has	in操作符捕捉器
get	屬性讀取操作符捕捉器
set	屬性設(shè)置操作符讀取器
deleteProperty	delete操作符讀取器
ownKeys	Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器。
apply	函數(shù)調(diào)用捕捉器
construct	new操作符的捕捉器

3.可消除的Proxy

? Proxy有一個(gè)唯一的靜態(tài)方法Proxy.revocable(target, handler)，可以用來(lái)創(chuàng)建一個(gè)可撤銷(xiāo)的代理對(duì)象，該方法的返回值是一個(gè)對(duì)象，其結(jié)構(gòu)為： {"proxy": proxy, "revoke": revoke}。

proxy 表示新生成的代理對(duì)象本身，和用一般方式 new Proxy(target, handler) 創(chuàng)建的代理對(duì)象沒(méi)什么不同，只是它可以被撤銷(xiāo)掉。
revoke 撤銷(xiāo)方法，調(diào)用的時(shí)候不需要加任何參數(shù)，就可以撤銷(xiāo)掉和它一起生成的那個(gè)代理對(duì)象。

ps.該方法常用于完全封閉對(duì)目標(biāo)對(duì)象的訪問(wèn)。

4.Vue為什么要用Proxy重構(gòu)

? Vue3.0之前，雙向綁定主要是由defineProperty實(shí)現(xiàn)的。而defineProperty這個(gè)方法本身其實(shí)是存在不足的，比如說(shuō)對(duì)于對(duì)象屬性增加、數(shù)組按下標(biāo)修改等一下操作無(wú)法做到原生實(shí)現(xiàn)。雖然Vue有提供相應(yīng)的手動(dòng)observer方法，但在使用體驗(yàn)上還是不盡如人意的。而想較于defineProperty針對(duì)屬性進(jìn)行攔截，Proxy直接劫持了整個(gè)對(duì)象，即不需要對(duì)特殊的操作做單獨(dú)處理。