ES6 中的 Proxy

Question

看了一下 Vue3.0 的源码，有必要重新看一下 Proxy 的概念

Proxy 的中文意思是代理，es6 中的 Proxy 用来代理的是对象操作，也就是在操作对象之前，对这个操作进行一次拦截，这样我们就可以自定义拦截操作，我们知道，除了我们常用的 obj.prop 或者 obj[prop] 的访问操作以及 obj.prop=value 的读写操作以外，我们还可以遍历对象的属性，或者删除一个对象的属性，这些都是对象操作，Proxy 的出现，相当于提供了一个统一的入口来整合对象操作，使得对象操作更聚合，颗粒度更大。

Proxy 的使用方法只有一种形式

// target 是代理的目标对象， handler 是代理操作的集合对象
let proxy = new Proxy(target, handler)

注意，如果对 proxy 对象直接读取，比如 console.log(proxy) 这样的操作，如果这个 proxy 对象拦截了 get 操作，那么，目标对象的所有属性都会读取一遍，也就是说，有 3 个属性，就会执行 3 次与之对应的 get 拦截。

操作集合：

1. get(target, prop)

读属性时调用的函数，需要注意的是，当一个属性不可配置或者不可写的时候，这个属性是不能代理的，proxy 代理过程中会报错

2. set(target, prop)

写属性（配置属性时调用），用来拦截属性的赋值操作

3. apply()

用于拦截函数调用，例：

let target = function () {
  return '测试'
}
let handler = {
  apply: function () {
     return '现在执行的是 handler 中的 apply'
  }
}
let p = new Proxy(target, handler)
p() // '现在执行的是 handler 中的 apply'

4. has()

用于拦截属性是否存在的操作，对 in 运算符生效，但对于 for...in 运算符不生效

5. construct

用于拦截 new 命令

let handler = {
  construct (target, args, newTarget) {
    
  }
}

6. deleteProperty()

用于拦截属性的 delete 操作