Proxy 是 ES6 为了操作对象引入的 API 。Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。

一、概述

Proxy 可以理解为在目标对象的外层搭建了一层拦截，外界对目标对象的某些操作，必须通过这层拦截。

使用new Proxy()生成一个 Proxy 实例：

var proxy = new Proxy(target, handler);

target 参数表示所要拦截的目标对象，handler 参数也是一个对象，用来定制拦截行为。看一个最简单的实例：

let obj = {}
let p = new Proxy(obj, {})
p.name = 'lily'
console.log(obj.name) // lily

Vue2 中实现双向数据绑定使用的是 ES5 中的 Object.defineProperty()，Vue3 实现双向绑定使用的是 Proxy。

二、Proxy 所能代理的范围

实际上 handler 本身就是 ES6 所新设计的一个对象。它的作用就是用来 自定义代理对象的各种可代理操作。它本身一共有13 种方法，每种方法都可以代理一种操作。其 13 种方法如下：

// 在读取代理对象的原型时触发该操作，比如在执行 Object.getPrototypeOf(proxy) 时。
handler.getPrototypeOf()

// 在设置代理对象的原型时触发该操作，比如在执行 Object.setPrototypeOf(proxy, null) 时。
handler.setPrototypeOf()

 
// 在判断一个代理对象是否是可扩展时触发该操作，比如在执行 Object.isExtensible(proxy) 时。
handler.isExtensible()

 
// 在让一个代理对象不可扩展时触发该操作，比如在执行 Object.preventExtensions(proxy) 时。
handler.preventExtensions()

// 在获取代理对象某个属性的属性描述时触发该操作，比如在执行 Object.getOwnPropertyDescriptor(proxy, "foo") 时。
handler.getOwnPropertyDescriptor()

 
// 在定义代理对象某个属性时的属性描述时触发该操作，比如在执行 Object.defineProperty(proxy, "foo", {}) 时。
andler.defineProperty()

 
// 在判断代理对象是否拥有某个属性时触发该操作，比如在执行 "foo" in proxy 时。
handler.has()

// 在读取代理对象的某个属性时触发该操作，比如在执行 proxy.foo 时。
handler.get()

 
// 在给代理对象的某个属性赋值时触发该操作，比如在执行 proxy.foo = 1 时。
handler.set()

// 在删除代理对象的某个属性时触发该操作，比如在执行 delete proxy.foo 时。
handler.deleteProperty()

// 在获取代理对象的所有属性键时触发该操作，比如在执行 Object.getOwnPropertyNames(proxy) 时。
handler.ownKeys()

// 在调用一个目标对象为函数的代理对象时触发该操作，比如在执行 proxy() 时。
handler.apply()

// 在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行new proxy() 时，此方法必须返回一个对象。
handler.construct()

常见拦截器实例：

get() 实例：

let dict = {
  'hello': '你好',
  'world': '世界'
}
dict = new Proxy(dict, {
  get(target, prop) {
    return prop in target ? target[prop] : `${prop}属性不存在`
  }
})
console.log(dict.hello) // 你好
console.log(dict.hello1) // hello1属性不存在

set() 实例：

let arr = []
arr = new Proxy(arr, {
    set(target, prop, val) {
        if (typeof val === 'number') {
            target[prop] = val
            return true
        } else {
            return false
        }
    }
})
arr.push(5)
arr.push(6)
console.log(arr[0], arr[1], arr.length) // 5 6 2

用 Proxy 代理时，并不会改变原有的属性和方法，上例中数组的 push() 方法和 length 属性可以正常使用和读取。

has() 实例：

let range = {
  start: 1,
  end: 5
}

range = new Proxy(range, {
  has(target, prop){
      return prop >= target.start && prop <= target.end
  }
})
console.log(2 in range) // true
console.log(9 in range) // false

ownKeys() 实例：

// 实现 以_开头是属性为私有属性，外部无法读取
let userinfo = {
  username: 'Lily',
  age: 20,
  _password: '***'
}
userinfo = new Proxy(userinfo, {
  ownKeys(target) {
      return Object.keys(target).filter(key => !key.startsWith('_'))
  }
})

for (let key in userinfo) {
  console.log(key) // 会输出 username 与 age
}
console.log(Object.keys(userinfo)) // ["username", "age"]

apply() 实例：

let sum = (...args) => {
  let num = 0
  args.forEach(item => {
      num += item
  })
  return num
}

sum = new Proxy(sum, {
  apply(target, ctx, args) { // 第二个参数为当前上下文
      return target(...args) * 2
  }
})
console.log(sum(1, 2)) // 6
console.log(sum.call(null, 1, 2, 3)) // 12，第一个参数为null表示不改变this指向
console.log(sum.apply(null, [1, 2, 3])) // 12，第一个参数为null表示不改变this指向

construct() 实例:

let User = class {
    constructor(name) {
        this.name = name
    }
}
User = new Proxy(User, {
    construct(target, args, newTarget) { //第二个参数为当前构造函数参数列表
        console.log('construct')
        return new target(...args)
    }
})
console.log(new User('lily')) // User {name: "lily"}