ES6 Proxy

• 拦截对象属性的读取和修改操作

  • 在ES6之前Object.defineProperty

    • Proxy 提供了更多的拦截器和操作，比如属性的读取、设置、删除、函数调用等

    • Object.defineProperty 那样一次性定义所有的属性，Proxy 的拦截器可以根据需要对不同的操作进行处理

    • Proxy 对数组和嵌套对象的处理更加友好和简洁

  • 只有对生成的 Proxy 实例操作才能起到拦截的作用

生成Proxy实例

• target ：需要代理的对象

• handler ：拦截函数的集合

  • 空对象则任何操作都不会拦截

var proxy = new Proxy(target, handler);

let obj = {}

/*handler为空对象*/
let proxy = new Proxy(obj, {});
proxy.a = 1
//obj.a  //1

• 对属性的读取进行拦截

var proxy = new Proxy({}, {
  get: function(target, property) {
    return 35;
  }
});

proxy.time // 35
proxy.name // 35
proxy.title // 35

拦截操作

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

  • 返回一个布尔值

• getPrototypeOf(target)

  • 拦截Object.getPrototypeOf(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)

• isExtensible(target)

  • 拦截Object.isExtensible(proxy)

  • 返回一个布尔值

• preventExtensions(target)

  • 拦截Object.preventExtensions(proxy)

  • 返回一个布尔值

场景

• 统计函数调用次数

• 实现响应式数据观测（Vue 3.0）

• 实现不可变数据（Immutable）