一文講解JS中ES6代理Proxy用法（代碼分享）

之前的文章《淺析vue中web前端項(xiàng)目?jī)?yōu)化（附代碼）》中，給大家了解了vue中web前端項(xiàng)目?jī)?yōu)化。下面本篇文章給大家了解一下JS中ES6代理Proxy用法，伙伴們來(lái)看看一下。

proxy的概念

proxy英文原意是代理的意思，在ES6中，可以翻譯為"代理器"。它主要用于改變某些操作的默認(rèn)行為，等同于在語(yǔ)言層面做出修改，所以屬于一種“元編程”（meta programming），即對(duì)編程語(yǔ)言進(jìn)行編程。

proxy在目標(biāo)對(duì)象的外層搭建了一層攔截，外界對(duì)目標(biāo)對(duì)象的某些操作（后文會(huì)說(shuō)明，有哪些操作可以攔截），必須通過這層攔截。語(yǔ)法

var proxy = new Proxy(target, handler);

通過構(gòu)造函數(shù)生成proxy，target參數(shù)是要攔截的目標(biāo)對(duì)象，handler參數(shù)也是一個(gè)對(duì)象，用來(lái)定制攔截行為。

例子

var obj = new Proxy(   {},   {     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);     },   } );

一般將handle參數(shù)說(shuō)成配置對(duì)象，在配置對(duì)象中，可以定義需要攔截的操作。如果配置對(duì)象為空，那么對(duì)proxy的操作將直通目標(biāo)對(duì)象。

對(duì)proxy操作才有攔截效果，而不是目標(biāo)對(duì)象。

Proxy實(shí)例的方法

當(dāng)讀取不存在的屬性時(shí)候，拋出錯(cuò)誤而不是返回undefined

var person = {   name: "張三", };  var proxy = new Proxy(person, {   get: function (target, property) {     if (property in target) {       return target[property];     } else {       throw new ReferenceError('Property "' + property + '" does not exist.');     }   }, });  proxy.name; // "張三" proxy.age; // 拋出一個(gè)錯(cuò)誤

攔截讀取繼承屬性

let proto = new Proxy(   {},   {     get(target, propertyKey, receiver) {       console.log("GET " + propertyKey);       return target[propertyKey];     },   } );  let obj = Object.create(proto); obj.xxx; // "GET xxx"

數(shù)組讀取負(fù)數(shù)索引（負(fù)數(shù)索引表示倒著取數(shù)）

function createArray(...elements) {   let handler = {     get(target, propKey, receiver) {       let index = Number(propKey);       if (index < 0) {         propKey = String(target.length + index);       }       return Reflect.get(target, propKey, receiver);     },   };    let target = [];   target.push(...elements);   return new Proxy(target, handler); }  let arr = createArray("a", "b", "c"); arr[-1]; // c

實(shí)現(xiàn)數(shù)據(jù)的限制

let validator = {   set: function (obj, prop, value) {     if (prop === "age") {       if (!Number.isInteger(value)) {         throw new TypeError("The age is not an integer");       }       if (value > 200) {         throw new RangeError("The age seems invalid");       }     }      // 對(duì)于age以外的屬性，直接保存     obj[prop] = value;   }, };  let person = new Proxy({}, validator);  person.age = 100;  person.age; // 100 person.age = "young"; // 報(bào)錯(cuò) person.age = 300; // 報(bào)錯(cuò)

防止內(nèi)部屬性“_”被外部讀寫（通常我們以下劃線開頭，表示其實(shí)內(nèi)部屬性）

var handler = {   get(target, key) {     invariant(key, "get");     return target[key];   },   set(target, key, value) {     invariant(key, "set");     target[key] = value;     return true;   }, }; function invariant(key, action) {   if (key[0] === "_") {     throw new Error(`Invalid attempt to ${action} private "${key}" property`);   } } var target = {}; var proxy = new Proxy(target, handler); proxy._prop; // Error: Invalid attempt to get private "_prop" property proxy._prop = "c"; // Error: Invalid attempt to set private "_prop" property

攔截——函數(shù)調(diào)用、call、apply操作

var twice = {   apply(target, ctx, args) {     return Reflect.apply(...arguments) * 2;   }, }; function sum(left, right) {   return left + right; } var proxy = new Proxy(sum, twice); proxy(1, 2); // 6 proxy.call(null, 5, 6); // 22 proxy.apply(null, [7, 8]); // 30

不對(duì)...in...循環(huán)生效

var handler = {   has(target, key) {     if (key[0] === "_") {       return false;     }     return key in target;   }, }; var target = { _prop: "foo", prop: "foo" }; var proxy = new Proxy(target, handler); "_prop" in proxy; // false

不對(duì)for...in...循環(huán)生效

let stu1 = { name: "張三", score: 59 }; let stu2 = { name: "李四", score: 99 };  let handler = {   has(target, prop) {     if (prop === "score" && target[prop] < 60) {       console.log(`${target.name} 不及格`);       return false;     }     return prop in target;   }, };  let oproxy1 = new Proxy(stu1, handler); let oproxy2 = new Proxy(stu2, handler);  "score" in oproxy1; // 張三 不及格 // false  "score" in oproxy2; // true  for (let a in oproxy1) {   console.log(oproxy1[a]); } // 張三 // 59  for (let b in oproxy2) {   console.log(oproxy2[b]); } // 李四 // 99

攔截object.keys()方法

let target = {   a: 1,   b: 2,   c: 3, };  let handler = {   ownKeys(target) {     return ["a"];   }, };  let proxy = new Proxy(target, handler);  Object.keys(proxy); // [ 'a' ]

本文來(lái)源RYF地址：https://es6.ruanyifeng.com/#docs/proxy

推薦學(xué)習(xí)：JS高級(jí)教程