Proxy可以理解为，在目标对象之前设一层"拦截"，外界对该对象的访问，都必须通过这层拦截,可以对外界的访问进行过滤和改写（表示可以用它"代理"某些操作，可以翻为“代理器"）。
以上示例中所代理的目标对象是一个空对象，如果没有Proxy的介入,操作原来要访问的就是这个对象,第二个参数是一个配置对象，对于每一个被代理的操作，需提供一个对应的处理函数，该函数拦截对应操作.应为此示例配置对象有一个get方法来拦截对目标对象属性的访问请求.get方法的两个参数(target:目标对象,propKey:所访问的属性)，可以看到访问此对象由于get没有设置访问属性统一返回35,所以访问任何属性都得到35。
以上示例由于handler是一个空对象,没有任何拦截，所以访问proxy就等同于访问target。
以上示例表示Proxy也可以作为其他对象的原型，由于proxy对象是obj对象的原型，obj对象本身并没有time属性，所以会根据原型链，会在proxy对象上读取该属性,导致被拦截.
以上示例表示同一个拦截器，可以设置多个拦截操作。
Proxy拦截操作（13种）
1.get(target[ 被代理的对象 ],propKey[ 属性名 ],receiver[ proxy实例本身 ]):拦截对象属性的读取，比如proxy.foo或proxy['foo']。
2.set(target[ 被代理的对象 ]，propKey[ 属性名 ]，value[ 新的属性值 ]，receiver[ proxy实例本身 ]):拦截对象属性的设置，比如proxy.foo=v或者proxy["foo"]=v,返回一个布尔值。
3.has(target[ 被代理的对象 ]，propKey[ 属性名 ]):拦截propKey in proxy操作，返回一个布尔值
4.deleteProperty(target[ 被代理的对象 ]，propKey[ 属性名 ]):拦截 delete proxy[propKey]操作,返回一个布尔值.
5.ownKeys(target[ 被代理的对象 ]):拦截object.getOwnPropertyNames(proxy)，Object.getOwnPropertySymbols(proxy)，Object.keys(proxy)，for...in循环，返回一个数组。该方法，而object.keys()的返回结果仅包括目标对象资深可遍历的属性。
6.getOwnPropertyDescriptor(target[ 被代理的对象 ]，propKey[ 属名 ]):Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
7.defineProperty( target[被代理的对象]，propKey[属性名], propDesc[描述符] )：拦截Object.defineProperty(proxy,propKey,propDesc)、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
8. preventExtensions(target[被代理的对象]) ：拦截Object.preventExtensions(proxy)，返回一个布尔值。
9. getPrototypeOf(target[被代理的对象]) ：拦截Object.getPrototypeOf(proxy)，返回一个对象。
10. isExtensible(target[被代理的对象]) ：拦截Object.isExtensible(proxy)，返回一个布尔值。
11. setPrototypeOf(target[被代理的对象] , proto[原型对象])： 拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
12.apply( target[被代理的对象], object[对象this指向], args[参数] )：拦截Proxy实例作为函数调用的操作，例如：proxy(...args),proxy.call(object,...args),proxy.apply()。
13.construct( arget[被代理的对象],args[参数] ):拦截Proxy实例作为构造函数调用的操作,比如new proxy(...args)。
使用场景示例：
1.利用proxy，可以将读取属性的操作(get),转变为某个函数,从而实现链式操作。
2.实现私有变量
3.简单校验
Proxy.revocable()创建一个可撤销的Proxy对象.该对象的proxy属性是Proxy的实例，revoke属性是一个函数.当revoke函数执行后，在访问Proxy实例，就会报错.
1.Proxy可以包装任何形式的对象：包括原生数组，函数，甚至另一个代理
2.代理实例中没有指定的handler,实际就是操作原对象target：实例：打开控制台查看
let target = function(){return 'ddd'}
let proxy = new Proxy(target, {})
proxy.prototype.age = 12
console.log(proxy.prototype === target.prototype) // true
3.代理实例只是返回对象target的一个代理包装(只有在触发handler时，handler中可以操作target)，target的更改不会触发代理实例的handler：实例：打开控制台查看
来看一下具体的运用
MDN上有一个实例比较特别【拓展构造函数】，来看一下：在线例子
function extend(sup, base) {
var descriptor = Object.getOwnPropertyDescriptor(
base.prototype, 'constructor'
)
base.prototype = Object.create(sup.prototype)
var handler = {
construct: function(target, args) {
var obj = Object.create(base.prototype)
this.apply(target, obj, args)
return obj
},
apply: function(target, that, args) {
sup.apply(that, args)
base.apply(that, args)
}
}
var proxy = new Proxy(base, handler)
descriptor.value = proxy
Object.defineProperty(base.prototype, 'constructor', descriptor)
return proxy
}
var Person = function(name) {
this.name = name
}
var Boy = extend(Person, function(name, age) {
this.age = age
})
Boy.prototype.gender = 'M'
var Peter = new Boy('Peter', 13)
console.log(Peter.gender) // "M"
console.log(Peter.name) // "Peter"
console.log(Peter.age) // 13
执行完Boy.prototype.gender = 'M'后，数据结构是下面这个样子的
proxy-constructor1.png
执行 var Peter = new Boy('Peter', 13)
new操作进入到handler.construct，里面的上下文环境this绑定在handler（可以查看MDN文档描述）。直接调用this.apply进入handler.apply执行。new操作执行完毕之后的数据结构
proxy-constructor2.png
巧妙利用原型链和代理
handler形参中的receiver
receiver是代理或继承代理的对象。通俗来讲，就是触发了handler的源头对象。一般receiver即是target的代理实例。
但是如果对象继承了代理对象的情况，如下:
"use strict"
const proxy = new Proxy({}, {
get: function(target, prop, receiver) {
if(proxy === receiver){
console.log('receiver为proxy')
}
else if(obj === receiver){
console.log('receiver为obj')
}else{
console.log('receiver不为proxy也不为obj')
}
return 'chua'
}
})
proxy.dd // receiver为proxy
let obj = Object.create(proxy)
obj.msg // receiver为obj
proxy对象是obj对象的原型，obj对象本身并没有msg属性，所以根据原型链，会在proxy对象上读取该属性，导致被拦截。
obj是obj.msg触发handler的原始调用（源头）
handler.set
set必须返回一个boolean类型
必须返回一个boolean类型，true表示设置成功，返回false表示失败，严格模式下会抛错(下面的例子全部在严格模式下执行)
注意：返回的数据如果不是boolean类型，会转换成布尔类型，假值包括：undefined，null，false, +0, -0, NaN, "" ：实例
const target = {
msg: "hello"
}
const handler = {
set: function(target, prop, value, receiver){
target[prop] = value
// return true
}
}
const proxy = new Proxy(target, handler)
proxy.msg = 'wow' // Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'msg'
handler.set在以下情况会抛错
1.如果相应的目标对象属性是不可写的数据属性，则无法将属性的值更改为与相应目标对象属性的值不同的值。实例:严格模式
var obj = {}
Object.defineProperty(obj, 'year', {
// configurable: false, 默认false
// writable: false, 默认false
value: 2
})
Object.defineProperty(obj, 'class', {
configurable: true,
// writable: false, 默认false
value: 'chua'
})
var proxy = new Proxy(obj, {
set(target, prop, val){
target[prop] = val
return true
}
})
proxy.card = 'sdf' // 设置成功
proxy.year = 10 // Uncaught TypeError: Cannot assign to read only property 'year' of object
proxy.class = 'dd' // Uncaught TypeError: Cannot assign to read only property 'class' of object
2.如果相应的目标对象属性配置了[[Set]]为undefined，实例
var obj = {}
const defineReactive = function(data, key, val) {
Object.defineProperty(data, key, {
get: function(){
return val
},
set: undefined // 应该设置成下面这个正确的函数
// function(newVal) {
// val = newVal
// }
})
}
defineReactive(obj, 'year', obj.year)
var proxy = new Proxy(obj, {
set(target, prop, val){
target[prop] = val
return true
}
})
obj.year = 20 // Uncaught TypeError: Cannot set property year of #<Object>which has only a getter
proxy.year = 30 // Uncaught TypeError: Cannot set property year of #<Object>which has only a getter
3.在严格模式下，handler.set错误返回值(转换为boolean后为false)将引发TypeError异常。
复杂对象
Proxy只对其根属性（原型链上的也算）的值的更改做监听，如果某个属性key对应的值为一个引用类型，引用地址没有发生改变则不会进入到handler.set
const target = {
info: {
name: 'chua',
age: 18
}
}
const handler = {
set: function(target, prop, value, receiver){
console.log('in handler.set', target, prop, value, receiver)
target[prop] = value
return true
}
}
const proxy = new Proxy(target, handler)
proxy.info.name = 'chua1989' // 没有进入handler.set, 需要直接更改info属性才行
console.log(proxy.info.name) // chua1989
handler.has
报错的情况
1.target的某属性为不可配置，则该属性不能被代理隐藏（即handle.has不能返回false）: 在线运行
var obj = {}
Object.defineProperty(obj, 'year', {
configurable: false,
value: 2
})
var proxy = new Proxy(obj, {
has: function(target, prop) {
console.log('called: ' + prop)
return false
}
})
console.log('year' in proxy)// Uncaught TypeError: 'has' on proxy: trap returned falsish for property 'year' which exists in the proxy target as non-configurable
2.target对象不可拓展，则已经存在的属性不能被代理隐藏：在线运行
var obj = { year: 2}
Object.preventExtensions(obj)
var proxy = new Proxy(obj, {
has: function(target, prop) {
console.log('called: ' + prop)
return false
}
})
console.log('a' in proxy)// 不存在的属性没有问题
console.log('year' in proxy)// Uncaught TypeError: 'has' on proxy: trap returned falsish for property 'year' but the proxy target is not extensible
handler.construct
只有当target能使用new方法该配置才能起作用。即target必须是函数
const p = new Proxy({}, {
construct: function(target, argumentsList, newTarget) {
return function(){}
}
})
new p()// proxy.html:16 Uncaught TypeError: p is not a constructor
而且handler.construct必须返回一个Object引用类型就行
const p = new Proxy(function() {}, {
construct: function(target, argumentsList, newTarget) {
return 1
}
})
new p()// TypeError is thrown
下面这个就不会报错
const p = new Proxy(function() {}, {
construct: function(target, argumentsList, newTarget) {
return function(){}
}
})
new p()
handler.construct中的this指向的是handler
handler.deleteProperty
deleteProperty 必须返回一个 Boolean 类型的值，表示了该属性是否被成功删除。严格模式下false会报错
var p = new Proxy({}, {
deleteProperty: function(target, prop) {
console.log('called: ' + prop)
return false
}
})
delete p.a// "called: a"
如果目标对象的属性是不可配置的，那么该属性不能被删除
var obj = {}
Object.defineProperty(obj, 'a', {
configurable: false
})
var p = new Proxy(obj, {
deleteProperty: function(target, prop) {
console.log('called: ' + prop)
return true
}
})
delete p.a// "called: a" // Uncaught TypeError: 'deleteProperty' on proxy: trap returned truish for property 'a' which is non-configurable in the proxy target
handler.defineProperty
如果目标对象不可扩展（non-extensible），则defineProperty()不能增加目标对象上不存在的属性，否则会报错。
如果目标对象的某个属性不可写（writable）或不可配置（configurable），则defineProperty()方法不得改变这两个设置(这是Object.defineProperty的特性)。
handler.getPrototypeOf
如果遇到了下面两种情况，JS 引擎会抛出 TypeError 异常：
getPrototypeOf() 方法返回的不是对象也不是 null。
目标对象是不可扩展的，且 getPrototypeOf() 方法返回的原型不是目标对象本身的原型。
handler.isExtensible
isExtensible方法必须返回一个 Boolean值或可转换成Boolean的值。
Object.isExtensible(proxy) 必须同Object.isExtensible(target)返回相同值。也就是必须返回true或者为true的值,返回false和为false的值都会报错。
handler.ownKeys
有三类属性会被ownKeys()方法自动过滤，不会返回。
1.目标对象上不存在的属性
2.属性名为 Symbol 值
3.不可遍历（enumerable）的属性
如果违反了下面的约束，proxy将抛出错误 TypeError:
1.ownKeys 的结果必须是一个数组.
2.数组的元素类型要么是一个 String ，要么是一个 Symbol.
3.结果列表必须包含目标对象的所有不可配置（non-configurable ）、自有（own）属性的key.
4.如果目标对象不可扩展，那么结果列表必须包含目标对象的所有自有（own）属性的key，不能有其它值.
handler.preventExtensions
如果目标对象是可扩展的，那么只能返回 false。否则抛错
handler.setPrototypeOf
如果 target 不可扩展, 原型参数必须与Object.getPrototypeOf(target) 的值相同. 否则抛错
如果你不想为你的对象设置一个新的原型，你的handler's的setPrototypeOf方法可以返回false，也可以抛出异常。
var handlerReturnsFalse = {
setPrototypeOf(target, newProto) {
return false
}
}
var newProto = {}, target = {}
var p1 = new Proxy(target, handlerReturnsFalse)
Object.setPrototypeOf(p1, newProto)// throws a TypeError
Reflect.setPrototypeOf(p1, newProto)// returns false
为什么Object和Reflect调用setPrototypeOf结果会不同。这便是Reflect被例入标准的一个原因之一：操作对象时出现报错返回false。这样可以直接使用如下的方式
if(Reflect.setPrototypeOf(p1, newProto)){
...
}
handler的属性方法中的this
正常情况，handler的属性方法中this指向的是proxy实例，而不是target,要特别注意
const target = new Date()
const handler = {}
const proxy = new Proxy(target, handler)
proxy.getDate()
// TypeError: this is not a Date object.
深圳网站优化www.zg886.cn
Object.defineProperty : 通过设定对象属性getter/setter方法来监听数据的变化，同时getter也用于依赖收集，而setter在数据变更时通知订阅者更新视图。
1.无法检测到对象属性的新增或删除
由于js的动态性，可以为对象追加新的属性或者删除其中某个属性，这点对经过Object.defineProperty方法建立的响应式对象来说，只能追踪对象已有数据是否被修改，无法追踪新增属性和删除属性，这就需要另外处理。
2.不能监听数组的变化
vue在实现数组的响应式时，它使用了一些hack，把无法监听数组的情况通过重写数组的部分方法来实现响应式，这也只限制在数组的push/pop/shift/unshift/splice/sort/reverse七个方法，其他数组方法及数组的使用则无法检测到。
Proxy，字面意思是代理，是ES6提供的一个新的API，用于修改某些操作的默认行为，可以理解为在目标对象之前做一层拦截，外部所有的访问都必须通过这层拦截，通过这层拦截可以做很多事情，比如对数据进行过滤、修改或者收集信息之类。借用 proxy的巧用 的一幅图，它很形象的表达了Proxy的作用。
ES6原生提供的Proxy构造函数，用法如下：
其中obj为Proxy要拦截的对象，handler用来定制拦截的操作，返回一个新的代理对象proxy；Proxy代理特点：
1.Proxy的代理针对的是整个对象，而不是像Object.defineProperty针对某个属性。只需做一层代理就可以监听同级结构下的所有属性变化，包括新增属性和删除属性
2.Proxy也可以监听数组的变化
参考： https://juejin.cn/post/6850418111985352711
