ES6-Proxy与数据劫持(12)

短命女 2022-12-16 09:26 104阅读 0赞

随着前端界的空前繁荣，各种框架横空出世，包括各类mvvm框架百家争鸣，比如Anglar、Vue、React等等，它们最大的优点就是可以实现数据绑定，再也不需要手动进行DOM操作了，它们实现的原理也基本上是脏检查或数据劫持。我们先以Vue框架出发，探索其中数据劫持的奥秘。

Vue 2.0的版本所使用的数据劫持，说白了就是通过Object.defineProperty()来劫持对象属性的setter和getter操作，在数据变动时做你想要做的事情，举个栗子：

但是有没有比Object.defineProperty更好的实现方式呢？

答案是肯定的有，那就是我们今天的主人公：Proxy

1、Proxy简介

Proxy这个词的原意是代理，用在这里表示由它来代理某些操作，可以译为代理器。

也可以理解成在目标对象之前设置一层拦截，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

在生活中，代理模式的场景是十分常见的，例如我们现在如果有购买海外产品（给女朋友买一个LV的包包，前提是你要先有个女朋友，^\_^）的需求，更多的是去找代购中介机构，而不是直接去国外买。此时，代购起到的作用就是代理的作用。

![图片描述][9d197a9726c081b8eecaf4202a932416.png]  
Proxy构造函数能够让我们轻松的使用代理模式：

var proxy = new Proxy(target, handler);

Proxy构造函数中有两个参数：

target是用Proxy包装的被代理对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

handler是一个对象，其声明了代理target 的一些操作，其属性是当执行一个操作时定义代理的行为的函数。

讲的通俗点，如何让代购帮你买LV的包包呢？

首先，你需要告诉代购你看好了哪款包包，这个款式就是Proxy里的第一个参数target。

其次就是制定购买策略，例如国外比国内便宜20%，就买2个，便宜40%，就买4个，这个策略就是第二个参数handle。

2、Proxy中的处理方法

Proxy有13种数据劫持的操作，那是相当的强大：

![图片描述][169a0a063f3e68e9c911fe0fe4b2a9b4.png]

2.1 get方法

get方法是在你得到某对象属性值时预处理的方法，接受两个常用参数

*  target：得到的目标值
 *  key：目标的key值，相当于对象的属性

可以代购来模拟handle中的get方法，如下

解释一下：客户想买一个LV的包，心理价位是5000，把购买目标和需求都告诉了代购，代购询问了下国外的价格，这款LV的包是9999，超出了客户的心理价位，于是不买了。

2.2 set方法

set方法用来拦截某个属性的赋值操作，可以接受四个参数

*  target:目标值。
 *  key：目标的Key值。
 *  value：要改变的值。
 *  receiver：改变前的原始值。

假定Person对象有一个age属性，该属性应该是一个不大于 200 的整数，那么可以使用Proxy保证age的属性值符合要求。

上面代码中，由于设置了存值函数set，任何不符合要求的age属性赋值，都会抛出一个错误，这是数据验证的一种实现方法。

3、Proxy相比Object.defineProperty的优势

3.1 支持数组

let arr = [1,2,3]
    let proxy = new Proxy(arr, {
        get (target, key, receiver) {
            console.log('get', key)
            return Reflect.get(target, key, receiver)
        },
        set (target, key, value, receiver) {
            console.log('set', key, value)
            return Reflect.set(target, key, value, receiver)
        }
    })
    proxy.push(4)
    // 能够打印出很多内容
    // get push     (寻找 proxy.push 方法)
    // get length   (获取当前的 length)
    // set 3 4      (设置 proxy[3] = 4)
    // set length 4 (设置 proxy.length = 4)

Proxy 不需要对数组的方法进行重载，省去了众多 hack，减少代码量等于减少了维护成本，而且标准的就是最好的。

3.2 针对对象

在数据劫持这个问题上，Proxy 可以被认为是 Object.defineProperty() 的升级版。外界对某个对象的访问，都必须经过这层拦截。因此它是针对 整个对象，而不是 对象的某个属性，所以也就不需要对 keys 进行遍历。

let obj = {
      name: 'Eason',
      age: 30
    }
    let handler = {
      get (target, key, receiver) {
        console.log('get', key)
        return Reflect.get(target, key, receiver)
      },
      set (target, key, value, receiver) {
        console.log('set', key, value)
        return Reflect.set(target, key, value, receiver)
      }
    }
    let proxy = new Proxy(obj, handler)
    proxy.name = 'Zoe' // set name Zoe
    proxy.age = 18 // set age 18

![图片描述][10ababfae7320a7a70a79d6d51c690b6.png]

3.3 嵌套支持

本质上，Proxy 也是不支持嵌套的，这点和 Object.defineProperty() 是一样的。因此也需要通过逐层遍历来解决。Proxy 的写法是在 get 里面递归调用 Proxy 并返回，代码如下：

let obj = {
      info: {
        name: 'eason',
        blogs: ['webpack', 'babel', 'cache']
      }
    }
    let handler = {
      get (target, key, receiver) {
        console.log('get', key)
        // 递归创建并返回
        if (typeof target[key] === 'object' && target[key] !== null) {
          return new Proxy(target[key], handler)
        }
        return Reflect.get(target, key, receiver)
      },
      set (target, key, value, receiver) {
        console.log('set', key, value)
        return Reflect.set(target, key, value, receiver)
      }
    }
    let proxy = new Proxy(obj, handler)
    // 以下两句都能够进入 set
    proxy.info.name = 'Zoe'
    proxy.info.blogs.push('proxy')

4、应用实例

4.1 使用Proxy实现表单校验

let person = {
        name: 'xiaoming',
        age: 30
    }
    let handler = {
        set (target, key, value, receiver) {
          if (key === 'name' && typeof value !== 'string') {
            throw new Error('用户姓名必须是字符串类型')
          }
          if (key === 'age' && typeof value !== 'number') {
            throw new Error('用户年龄必须是数字类型')
          }
          return Reflect.set(target, key, value, receiver)
        }
    }
    let boy = new Proxy(person, handler)
    boy.name = 'xiaohong' // OK
    boy.age = '18' // 报错  用户年龄必须是数字类型

5、总结

Proxy本质上属于元编程非破坏性数据劫持，在原对象的基础上进行了功能的衍生而又不影响原对象，符合松耦合高内聚的设计理念。

通俗的说Proxy在数据外层套了个壳，然后通过这层壳访问内部的数据，就像下面的图：

![图片描述][6998d7df220e0a3e7028a747700d65b5.png]  
Proxy让JS开发者很方便的使用代理模式，使函数更加强大，业务逻辑更加清楚。

Proxy 不但可以取代 Object.defineProperty 并且还扩增了非常多的功能。Proxy 技术支持监测数组的 push 等方法操作，支持对象属性的动态添加和删除，极大的简化了响应化的代码量。Vue 3.0的也会使用Proxy去实现部分核心代码。

在业务开发时应该注意Proxy使用场景，当对象的功能变得复杂或者我们需要进行一定的访问限制时，便可以考虑使用代理。

[9d197a9726c081b8eecaf4202a932416.png]: /images/20221123/0e599f2f9bd14da18ea240ea827b60a2.png
[169a0a063f3e68e9c911fe0fe4b2a9b4.png]: /images/20221123/da7ebb925ec947b28042e3e7ecf75f61.png
[10ababfae7320a7a70a79d6d51c690b6.png]: /images/20221123/450d037562e34b9a993e5fd165ba30bd.png
[6998d7df220e0a3e7028a747700d65b5.png]: /images/20221123/8c0ed660ec6c44a889e38a81eca0d865.png