打開 Chrome 控制台，輸入 window.Proxy ，你會發現 JavaScript 已經內置了一個全局的 Proxy 對象，請問這個對象是做什么用的？其實你用關鍵詞「Proxy MDN」搜索一下，就能得到一個詳細的教程。（在關鍵詞后面加 MDN 是一個前端必備的小技巧哦）我今天只做一個簡單的介紹。
假設我們有一個數據（對象）data，內容為
var data = { username: 'Frank', age: 26 }
現在我們給 data 創建一個代理 proxy
var proxy = new Proxy(data, {set: function(){...}, get: function(){...} })
那么，「proxy 就全權代理 data了」，這話是什么意思呢？意思就是 data 放假去了，如果你有任何事情要找 data，直接找 proxy 就好了，proxy 現在是 data 的秘書、代理人。比如原本你如果要改 username，那么應該寫 data.username = 'frank'；那么現在你只需要寫 proxy.username = 'frank' 就好了。原本你如果想寫 console.log(data.username)，現在也只需要 console.log(proxy.username) 就可以了。
那么我們思考一下這樣做有什么意義呢？
意義就是你能監控每一次對 data 的讀寫操作。
proxy.username = 'frank' 這句話實際上會運行 set 方法。set 方法可以對傳入的值進行監控和過濾。假設 PM 要求「username 前后不能含有空格」，用 Proxy 就很好實現這一需求，只需要把 set 寫成這樣：
set: function(obj, prop, value){ obj[prop] = value.trim() }
再假設 PM 要求「統計 username 被讀取的次數」，那么我們只需要把 get 寫成這樣：
get: function(obj, prop){ if(prop === 'username'){ count += 1 } return obj[prop] }
一、proxy對象是什么
Proxy 對象到底是什么呢？Proxy 的意思是代理，proxy對象的作用是：通過Proxy 創建1個代理對象，然后通過操作代理對象允許你對指定的對象的一些行為進行自定義處理。
Proxy(target,handler); Proxy構造函數接收2個對象，第1個參數就是要處理的對象，第2個參數就是要自定義處理的方法的合集(也就是個對象)。
很抽象？其實就和js中的Object.defineProperty很像。Object.defineProperty 定義訪問器屬性，可以對某個屬性的讀寫行為進行控制，在Proxy中也可以做到，而且Proxy更靈活和強大，它能做到很多訪問器屬性做不到的事情。比如，監聽屬性刪除事件(delete obj.prop;)、in 事件('id' in obj;)、apply調用等。
先來看看，proxy對象有哪些內容。
var targetObj = { id : 1, name : 'pxh', age : 20, school : '小學' } var handler = {}; // 此處，我們先不對targetObj的行為進行干預，所以傳個空對象進去即可。
var proxy = new Proxy(targetObj,handler); console.log(proxy);
看看打印的proxy是什么。
可以看到，proxy對象中，包含了Handler屬性和Target屬性和IsRevoked，它們的值分別是我們傳入的handler以及 targetObj和false。
這個isRevoked表示是否可撤銷，生成可撤銷的proxy對象用Proxy.revocable()方法，具體可去MDN查看文檔。
二、通過Proxy 對象操作原對象
var targetObj = { id : 1, name : 'pxh', age : 20, school : '小學' } var handler = {}; // 此處，我們先不對targetObj的行為進行干預，所以傳個空對象進去即可。
var proxy = new Proxy(targetObj,handler) /** * 1、讀取及修改屬性，可以看到原來的對象的屬性也被修改了 */ console.log(proxy.age); // 20
console.log(targetObj.age); // 20
proxy.age = 22; console.log(proxy.age); // 22
console.log(targetObj.age); // 22
/** * 2、刪除proxy對象的屬性，影響原來的對象的屬性 */ console.log(proxy.school); // 小學
console.log(targetObj.school); // 小學
delete proxy.age; console.log(proxy.age); // undefined
console.log(targetObj.age); // undefined
三、set方法和get方法
Proxy支持攔截的操作，一共有13種：
- get(target, propKey, receiver)：攔截對象屬性的讀取，比如
proxy.foo和proxy['foo']。 - set(target, propKey, value, receiver)：攔截對象屬性的設置，比如
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循環，返回一個數組。該方法返回目標對象所有自身的屬性的屬性名，而Object.keys()的返回結果僅包括目標對象自身的可遍歷屬性。 - 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)，返回一個布爾值。如果目標對象是函數，那么還有兩種額外操作可以攔截。 - apply(target, object, args)：攔截 Proxy 實例作為函數調用的操作，比如
proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。 - construct(target, args)：攔截 Proxy 實例作為構造函數調用的操作，比如
new proxy(...args)。
先來干預get行為(屬性讀取行為)
var targetObj = { id : 1, name : 'pxh', age : 20, school : '小學' } var handler = { // 定義get方法，get方法可以接收2個參數，分別是原來的對象及屬性
get : function(target,prop){ console.log(`${prop}屬性正在被查看`); console.log(targetObj == target); // true
return target[prop]; } }; var proxy = new Proxy(targetObj,handler); console.log(proxy.id); /** * 可以看到，打印順序為: * id屬性正在被查看 * true * 1 */
接下來把某些屬性變為 “私有” ，如不允許讀取id屬性。定義set方法，不允許修改id,name,age屬性
var targetObj = { id : 1, name : 'pxh', age : 20, school : '小學' } var handler = { // 定義get方法，get方法可以接收2個參數，分別是原來的對象及屬性
get : function(target,prop){ if(prop == 'id'){ return undefined; } return target[prop]; }, // 定義set方法，set方法比get多1個參數，那就是該屬性修改時的值
set : function(target,prop,value){ if(prop == 'id' || prop == 'name' || prop == 'age'){ console.log(`不允許修改${prop}屬性`) }else{ target[prop] = value; } } }; var proxy = new Proxy(targetObj,handler); /** * 修改屬性，分別打印 * 不允許修改id屬性 * 不允許修改name屬性 * 不允許修改age屬性 */ proxy.id = 2; proxy.name = 'pxh222'; proxy.age = 23; proxy.school = '中學'; // 這個無打印
/** * 讀取屬性，可以看到分別打印 * undefined * pxh * 20 * 中學 // 這個沒有攔截，因此可以修改 */ console.log(proxy.id); console.log(proxy.name); console.log(proxy.age); console.log(proxy.school);
同樣的，我們對刪除對象屬性的行為進行干預，不允許刪除id,name,age屬性。
var targetObj = { id : 1, name : 'pxh', age : 20, school : '小學' } var handler = { // 在handler中定義get方法，get方法可以接收2個參數，分別是原來的對象及屬性
get : function(target,prop){ if(prop == 'id'){ return undefined; } return target[prop]; }, // set方法比get多1個參數，那就是該屬性修改時的值
set : function(target,prop,value){ if(prop == 'id' || prop == 'name' || prop == 'age'){ console.log(`不允許修改${prop}屬性`) }else{ target[prop] = value; } }, /** * 這個方法要求返回個boolean值，表示是否刪除成功 * 如果返回的值不是boolean值，則會進行類型轉換成boolean值再返回 */ deleteProperty : function(target,prop){ if(prop == 'id' || prop == 'name' || prop == 'age'){ console.log(`不允許刪除${prop}屬性`); return false; }else{ delete target[prop]; return true; } } }; var proxy = new Proxy(targetObj,handler); /** * 嘗試刪除id屬性，可以看到打印順序為: * 不允許刪除id屬性 * false */ console.log(delete proxy.id); /** * 刪除school屬性，可以看到打印 * true * undefined */ console.log(delete proxy.school); console.log(proxy.school);
上面我們不允許獲取對象的id值，也不可以修改和刪除，現在我們把它隱藏掉
var targetObj = { id : 1, name : 'pxh', age : 20, school : '小學' } var handler = { // 在handler中定義get方法，get方法可以接收2個參數，分別是原來的對象及屬性
get : function(target,prop){ if(prop == 'id'){ return undefined; } return target[prop]; }, // set方法比get多1個參數，那就是該屬性修改時的值
set : function(target,prop,value){ if(prop == 'id' || prop == 'name' || prop == 'age'){ console.log(`不允許修改${prop}屬性`) }else{ target[prop] = value; } }, /** * 這個方法要求返回個boolean值，表示是否刪除成功 * 如果返回的值不是boolean值，則會進行類型轉換成boolean值再返回 */ deleteProperty : function(target,prop){ if(prop == 'id' || prop == 'name' || prop == 'age'){ console.log(`不允許刪除${prop}屬性`); return false; }else{ delete target[prop]; return true; } }, /** * 通過has 方法來控制，返回值也是個boolean，表示對象是否擁有某個屬性 * 如果返回的值不是boolean值，則會進行類型轉換成boolean值再返回 */ has : function(target,prop){ if(prop == 'id'){ return false }else{ return prop in target; } } }; var proxy = new Proxy(targetObj,handler); console.log('id' in proxy); // false
console.log('name' in proxy); // true
更多實例用法，可以參考這篇博客：es6 Proxy對象詳解
同樣的方法，proxy還能干預對象的行為還有很多，感興趣可以看MDN文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy