2.10　Proxy

Proxy是ES6中新增的一个特性。Proxy可以监听对象本身发生了什么事情，并在这些事情发生后执行一些相应的操作。利用Proxy可以对一个对象有很强的追踪能力，同时在数据绑定方面也非常有用。前端流行框架Vue在3.0版本中一个重要改变就是数据绑定的实现方式由Object.defineProperty改为了Proxy。

1．Proxy语法格式

Proxy构造函数用来生成Proxy，语法格式如下：

new Proxy（）：表示生成一个Proxy实例。target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。

2．Proxy的监听方法

Proxy中提供了13种拦截监听的方法，这里重点介绍Proxy拦截方法中最重要的set（）和get（）方法的用法。

1）get（）方法

get（）只能对已知的属性键进行监听，无法对所有属性的读取行为进行拦截，get（）监听方法可以拦截和干涉目标对象的所有属性的读取行为。

get（）方法的用法，如代码示例2-123所示。

代码示例2-123　chapter02\es6_demo\10-proxy\02_get.js

2）set（）方法

set（）方法用来拦截某个属性的赋值操作，可以接收4个参数，依次为目标对象、属性名、属性值和Proxy实例本身，其中最后一个参数可选，如代码示例2-124所示。

set（）方法用来拦截某个属性的赋值操作，可以接收4个参数，如表2-2所示。

set（）方法的使用方法，如代码示例2-124所示。

代码示例2-124　chapter02\es6_demo\10-proxy\03_set.js

3．Proxy的优势

Proxy相比较Object.defineProperty具备的优势如下：

（1）Proxy可以直接监听整个对象而非属性。

（2）Proxy可以直接监听数组的变化。

（3）Proxy有13种拦截方法，如ownKeys、deleteProperty、has等。

（4）Proxy返回的是一个新对象，只操作新的对象达到目的，而Object.defineProperty只能遍历对象属性进行直接修改；有属性，也无法监听动态新增的属性，但Proxy可以。

下面通过几个案例介绍Proxy的作用。

1）支持数组

Proxy不需要对数组的方法进行重载，就可以监听对对象的操作，如代码示例2-125所示。

代码示例2-125　chapter02\es6_demo\10-proxy\04.js

输出结果如下：

2）针对对象

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

代码示例2-126　chapter02\es6_demo\10-proxy\05.js

3）嵌套支持

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

代码示例2-127　chapter02\es6_demo\10-proxy\06.js Qlj2pzz4nF+qgC9kqStuj8iCOtjINcFQ7QUQF8pundNo65Rf7OOTw4mLbMliK6l7