文章目录一、概念二、Proxy实例方法1、get(2，set )案例三、参考资料
另一方面，概念Proxy在目标对象之前设置“监听”，可以理解为从外部对该对象的访问必须首先通过该监听，因此提供了过滤和改写外部访问的机制。 Proxy一词的原意是代理，在这里它表示“代理”某种操作，可以翻译为“代理器”。
ES6本机提供了生成代理实例的代理构造函数。
varproxy=newproxy(target，handler )；target 参数表示所要代理的目标对象，handler 参数也是一个对象，用来定制代理拦截行为。Proxy对象的所有用法如上所示，不同之处仅在于如何编写handler参数。 其中new Proxy ) )表示生成Proxy实例。
以下示例阻止读取属性的行为：
letproxy=newproxy (，{get:function ) target，key ) { //target是代理，key是要获取的属性//原始对象的属性名称在代理之后保持不变//35控制台. log (proxy.time； 在//35上的代码中，作为构造函数，Proxy接受两个参数。
第一个参数是要代理的目标对象。 上面的示例是空对象。 也就是说，如果没有代理干预，操作本来就需要访问此对象。 第二个参数是配置对象，必须为每个代理的操作提供相应的处理函数以阻止相应的操作。 例如，在上面的代码中，配置对象具有阻止访问目标对象属性的请求的get方法。 在get 方法的两个参数分别是目标对象和所要访问的属性。中可以看到，块函数总是返回35，因此访问任何属性都会得到35。注意，要使得 Proxy 起作用，必须针对 Proxy 实例进行操作，而不是针对目标对象进行操作。
另外，如果 Proxy 的第二个参数 handler 没有设置任何拦截，那就等同于直接通向原对象。
var target={}； var handler={}； varproxy=newproxy(target，handler )； proxy.a='b '； target.a //'b'//handler是空对象，没有阻止效果。 访问proxy与访问target、proxy实例的方法proxy支持的块操作共计13种类型相同。 介绍get和set的简单使用方法
1，get ) ) get方法用于阻止某个属性的读取操作，可以接受三个参数。 目标对象、属性名称和代理实例本身(严格来说，是操作行为的目标对象)，最后一个参数是可选的。
let person={ name : ' web Chang ' } let proxy=new proxy、{get、key}{if、keyin target } { return target } console.log 上面的代码表示，如果访问目标对象中不存在的属性，则会抛出错误。 如果没有此块函数，则在访问不存在的属性时只返回undefined。
2，set ) ) set方法用于阻止某个属性的赋值操作，使用目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。
let validator={ set : function (target，key，value ) if ) key==='age ' ) if (！ 有关满足number.isinteger(value )|| value 150 { throw new error (数据不正确) }//条件的age属性和其他属性的信息，请参阅target[key]=value }}let proxy=new Proxy({}，validator； proxy.age=89； 控制台. log (proxy.age )； //89 proxy.age='网络频道'； proxy.age=200； //错误报告上的代码设置了值保存函数set，因此将值赋值给不符合请求的age属性时，会抛出错误。 这是数据验证的实现方法之一。
在某些情况下，在对象上设置内部属性。 属性名称的第一个字符以下划线开头，表示这些属性不应该在外部使用。 与get组合
和 set 方法，就可以做到防止这些内部属性被外部读写。 function invariant (key, action) { if (key[0] === '_') { throw new Error(`不应该在 ${action} 方法中访问 ${key} 属性`) }}let handler = { get(target, key) { invariant(key, 'get'); return target[key]; }, set(target, key, value) { invariant(key, 'set'); target[key] = value; }}let proxy = new Proxy({}, handler);console.log(proxy._age); // Uncaught Error: 不应该在 get 方法中访问 _age 属性proxy._name = 'webchang'; // Uncaught Error: 不应该在 set 方法中访问 _name 属性上面代码中，只要读写的属性名的第一个字符是下划线，一律抛错，从而达到禁止读写内部属性的目的。
案例1、明星asjdnht案例
// 明星对象let star = { name: 'webchang', age: 18, phone: '12345'}// asjdnht-代理对象let agent = new Proxy(star,{ get:function (target,key) { if (key === 'phone') { // 返回asjdnht自己的电话，明星的电话要保密 return '56789'; } if (key === 'price') { //明星不报价，asjdnht报价 return 120000; } //如果不是上边的 phone 和price，就直接返回 star 自己的属性，可能是 name 或者 age return target[key]; }, set:function (target,key,value) { // 谈合作价格 if(key === 'customPrice') { if (value < 100000) { throw new Error('价格太低') } else { target[key] = value; return true; } } }})//测试console.log(agent.name); // webchangconsole.log(agent.age); // 18console.log(agent.phone); // 56789 拿到的是asjdnht的电话console.log(agent.price); // 120000// agent.customPrice = 9000; // 报错 Uncaught Error: 价格太低agent.customPrice = 900000;console.log(agent.customPrice); // 9000002、使用代理实现数组的负数索引
function createArrayProxy(array) { if (!Array.isArray(array)) { throw new TypeError('参数不是数组'); } return new Proxy(array, { get(target, index) { index = +index; // 转成数值 return target[index < 0 ? target.length + index : index]; }, set(target, index, value) { index = +index; target[index < 0 ? target.length + index : index] = value; } })}let arr = ['a','b','c','d'];let arrProxy = createArrayProxy(arr);console.log(arrProxy[-1]); // darrProxy[-2] = 'hello';console.log(arrProxy[-2]); // helloconsole.log(arr); // ["a", "b", "hello", "d"] 三、参考资料本博客介绍的内容有限，大家可以通过下边的资料继续学习：
Proxy - ECMAScript 6
前端学习交流QQ群，群内学习讨论的氛围很好，大佬云集，期待您的加入：862748629 点击加入