ES6知识点整理之Proxy的应用实例详解

什么是Proxy

Proxy是ES6中新增的一个用于拦截外部对对象的访问和改变操作的API，可以对目标对象进行劫持、代理和拦截。在Proxy对象被使用时，会对基础的API进行拦截，以达到监控、控制和修改其行为的目的。

Proxy的基本用法

当我们使用Proxy的时候，可以使用以下语法构造一个Proxy对象：

let p = new Proxy(target, handler)

target：表示被拦截的那个对象，可以是任何类型的对象（数组、函数、对象等），也可以是原始类型的数据（number、string等）。
handler：一个对象，用来定制拦截行为。

下面是一个简单的例子：

let target = {}
let handler = {
  get(target, key) {
    console.log(`getting ${key}`)
    return target[key]
  },
  set(target, key, value) {
    console.log(`setting ${key} to ${value}`)
    target[key] = value
  }
}
let p = new Proxy(target, handler)
p.name = 'Proxy'
console.log(p.name)

在上面的例子中，我们定义了一个空对象”target”，然后定义了一个handler对象，其中包含了一个get方法和一个set方法，它们会在访问和修改”target”对象的属性时被自动调用。最后我们使用p对象来代理target对象，当我们对p.name进行设置和访问时，就会触发对应的拦截行为。

Proxy的实际应用

下面我们来看两个较为实际的应用场景。

监控数据变化

在Vue.js、React.js等前端框架中，都有一个很重要的概念：数据响应式。它的实现原理都是通过监控数据变化来进行DOM的更新，从而实现页面的渲染。当时Vue.js 1.x时代，就是使用的Object.defineProperty()来实现数据监控的，而在Vue.js 2.x时代，就开始使用了Proxy来实现数据监控。下面就是一个简单的示例：

let data = {
  name: 'John',
  age: 22,
  address: {
    city: 'shanghai',
    district: 'pudong'
  }
}
let handler = {
  get(target, key) {
    console.log(`getting ${key}`)
    return target[key]
  },
  set(target, key, value) {
    console.log(`setting ${key} to ${value}`)
    target[key] = value
    //在这里做页面的更新操作
  }
}
let p = new Proxy(data, handler)
p.name = 'Peter'
p.address.city = 'beijing'

在上述代码中，我们定义了一个数据对象data，其中包括了普通属性”name”和”age”，以及一个嵌套对象”address”。我们通过一个handler对象来定义了这些属性和嵌套对象的get和set处理函数，在这些函数中通过console.log()输出对应的拦截信息，从而可以监控到这些属性和嵌套对象的变化。

同时，我们也可以在set处理函数中加入一些更新页面的代码，比如在Vue中就可以通过调用相关的更新函数来实现DOM的更新。

保护数据

有些时候，我们希望某些数据对象的属性不被外部直接修改，这个时候就可以使用Proxy来对这些对象进行保护。下面是一个示例：

let data = {
  name: 'John',
  age: 22
}

let handler = {
  get(target, key) {
    return target[key]
  },
  set(target, key, value) {
    if (key === 'age') {
      if (!Number.isInteger(value) || value < 0 || value > 120) {
        throw new Error('invalid age')
      }
    }
    target[key] = value
    console.log(target)
  }
}

let p = new Proxy(data, handler)
p.name = 'Peter'
p.age = 130 //设置无效，会抛出Error
console.log(p)

在这个例子中，我们定义了一个数据对象data，其中包括了一个普通属性”name”和一个数字属性”age”，然后使用handler对象来定义了这两个属性的get和set处理函数。在set处理函数中，我们对”age”属性进行了限制，必须是介于0~120的整数。如果传入的值与上述条件不符，则会抛出一个Error的异常。这样就保护了数据的完整性和正确性。