new Proxy()代理

Proxy 这个词的原意是代理，可以理解成，在目标对象之前架设一层“拦截”，外界对该目标对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

let proxy = new Proxy(target,handler);

Proxy对象由两个部分组成：target、handler

• target:目标对象
• handler：是一个对象，声明了代理target的指定行为，支持的拦截操作，一共13种：

- get(target,propKey,receiver)：拦截对象属性的读取。

- set(target,propKey,value,receiver)：拦截对象属性的设置，返回一个布尔值（修改成功）。

- has(target,propKey)：拦截 propKey in proxy 的操作，返回一个布尔值。

- deleteProterty(target,propKey)：拦截delete proxy[propKey]的操作，返回一个布尔值。

- ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in 循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。

- getOwmPropertyDescript(target,propKey)：拦截Object.getOwnPropertyDescriptor(proxy,propKey)，返回属性的描述对象。

- defineProperty(target,propKey,propDesc)：拦截Object.defineProperty(proxy,propKey,propDesc)、Object.defineProperties(proxy,propDesc),返回一个布尔值。

- 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)。

拦截方法	target (目标)	propKey (属性)	value (值)	receiver (proxy实例本身)	propDesc (属性描述)	proto (原型)	object (目标对象的上下文对象this)	args (参数)	newTarget (new 命令作用的构造函数)
get	√	√		√
set	√	√	√	√
has	√	√
deleteProperty	√	√
ownKeys	√
getOwnProperty	√	√
defineProperty	√	√			√
preventExtensions	√
getPrototypeOf	√
isExtensible	√
setPrototypeOf	√					√
apply	√						√	√
construct	√							√	√

例子：

var obj = new Proxy({}, {
  get: function (target, propKey, receiver) {
    console.log(`getting ${propKey}!`);
    return Reflect.get(target, propKey, receiver);
  },
  set: function (target, propKey, value, receiver) {
    console.log(`setting ${propKey}!`);
    return Reflect.set(target, propKey, value, receiver);
  }
});

obj.count = 1
//  setting count!
++obj.count
//  getting count!
//  setting count!
//  2