從 Proxy 說起

什么是Proxy

proxy翻譯過來的意思就是”代理“，ES6對Proxy的定位就是target對象(原對象)的基礎(chǔ)上通過handler增加一層”攔截“，返回一個新的代理對象，之后所有在Proxy中被攔截的屬性，都可以定制化一些新的流程在上面，先看一個最簡單的例子

const target = {}; // 要被代理的原對象// 用于描述代理過程的handlerconst handler = { get: function (target, key, receiver) {  console.log(`getting ${key}!`);  return Reflect.get(target, key, receiver); }, set: function (target, key, value, receiver) {  console.log(`setting ${key}!`);  return Reflect.set(target, key, value, receiver); }}// obj就是一個被新的代理對象const obj = new Proxy(target, handler);obj.a = 1 // setting a!console.log(obj.a) // getting a!

上面的例子中我們在target對象上架設(shè)了一層handler，其中攔截了針對target的get和set，然后我們就可以在get和set中間做一些額外的操作了

注意1：對Proxy對象的賦值操作也會影響到原對象target，同時對target的操作也會影響Proxy，不過直接操作原對象的話不會觸發(fā)攔截的內(nèi)容~

obj.a = 1; // setting a!console.log(target.a) // 1 不會打印 "getting a!"

注意2：如果handler中沒有任何攔截上的處理，那么對代理對象的操作會直接通向原對象

const target = {};const handler = {};const obj = new Proxy(target, handler);obj.a = 1;console.log(target.a) // 1

既然proxy也是一個對象，那么它就可以做為原型對象，所以我們把obj的原型指向到proxy上后，發(fā)現(xiàn)對obj的操作會找到原型上的代理對象，如果obj自己有a屬性，則不會觸發(fā)proxy上的get，這個應(yīng)該很好理解

const target = {};const obj = {};const handler = {  get: function(target, key){      console.log(`get ${key} from ${JSON.stringify(target)}`);      return Reflect.get(target, key);  }}const proxy = new Proxy(target, handler);Object.setPrototypeOf(obj, proxy);proxy.a = 1;obj.b = 1console.log(obj.a) // get a from {"a": 1}  1console.log(obj.b) // 1

ES6的Proxy實現(xiàn)了對哪些屬性的攔截？

通過上面的例子了解了Proxy的原理后，我們來看下ES6目前實現(xiàn)了哪些屬性的攔截，以及他們分別可以做什么？ 下面是 Proxy 支持的攔截操作一覽，一共 13 種

get(target, propKey, receiver)：攔截對象屬性的讀取，比如proxy.foo和proxy['foo']; set(target, propKey, value, receiver)：攔截對象屬性的設(shè)置，比如proxy.foo = v或proxy['foo'] = v，返回一個布爾值; has(target, propKey)：攔截propKey in proxy的操作，返回一個布爾值。 deleteProperty(target, propKey)：攔截delete proxy[propKey]的操作，返回一個布爾值; ownKeys(target)：攔截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for…in循環(huán)，返回一個數(shù)組。該方法返回目標(biāo)對象所有自身的屬性的屬性名，而Object.keys()的返回結(jié)果僅包括目標(biāo)對象自身的可遍歷屬性; getOwnPropertyDescriptor(target, propKey)：攔截Object.getOwnPropertyDescriptor(proxy, propKey)，返回屬性的描述對象; defineProperty(target, propKey, propDesc)：攔截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一個布爾值; preventExtensions(target)：攔截Object.preventExtensions(proxy)，返回一個布爾值; getPrototypeOf(target)：攔截Object.getPrototypeOf(proxy)，返回一個對象; isExtensible(target)：攔截Object.isExtensible(proxy)，返回一個布爾值; setPrototypeOf(target, proto)：攔截Object.setPrototypeOf(proxy, proto)，返回一個布爾值。如果目標(biāo)對象是函數(shù)，那么還有兩種額外操作可以攔截; apply(target, object, args)：攔截 Proxy 實例作為函數(shù)調(diào)用的操作，比如proxy(…args)、proxy.call(object, …args)、proxy.apply(…); construct(target, args)：攔截 Proxy 實例作為構(gòu)造函數(shù)調(diào)用的操作，比如new proxy(…args);