详解 JS 中的 Proxy(代理)和 Reflect(反射)

详解 JS 中的 Proxy(代理)和 Reflect(反射)

总所周知，Vue2 => Vue3 时，数据响应式方法从Object.defineProperty()方法变成了Proxy()，所以今天与大家 Proxy(代理)和 Reflect(反射)的知识。

讲解 Proxy 和 Reflect 前，我们需要先了解属性描述符的作用，所以我们先简单解释一下属性描述符的知识。

关于Proxy的使用场景，大家可以看看我的第二篇博客Proxy 与 Reflect 的常见使用场景。

1.属性描述符

属性描述符(Property Descriptor) 本质上是一个 JavaScript 普通对象，用于描述一个属性的相关信息，共有下面这几种属性。

• value：属性值
• configurable：该属性的描述符是否可以修改
• enumerable：该属性是否可以被枚举
• writable：该属性是否可以被重新赋值
• 存取器属性：属性描述符中如果配置了 get 和 set 中的任何一个，则该属性不再是一个普通属性，而变成了存取器属性。* get()读值函数：如果一个属性是存取器属性，则读取该属性时，会运行 get 方法，并将 get 方法得到的返回值作为属性值* set(newVal)存值函数：如果给该属性赋值，则会运行 set 方法，newVal 参数为赋值的值。

存取器属性最大的意义，在于可以控制属性的读取和赋值，在函数里可以进行各种操作。

Vue2 数据响应式就是使用了这一点，在 getter 和 setter 函数中进行了数据绑定与派发更新。

注意点：value 和 writable 属性不能与 get 和 set 属性二者不可共存，二者只能选其一。

查看某个对象的属性描述符，使用以下这两种方法：

Object.getOwnPropertyDescriptor(对象, 属性名); //得到一个对象的某个属性的属性描述符
Object.getOwnPropertyDescriptors(对象); //得到某个对象的所有属性描述符 

为某个对象添加属性时 或 修改属性时，配置其属性描述符，使用以下这两种方法:

Object.defineProperty(对象, 属性名, 描述符); //设置一个对象的某个属性
Object.defineProperties(对象, 多个属性的描述符); //设置一个对象的多个属性 

2.Reflect

1.Reflect 是什么？* Reflect 是一个内置的 JS 对象，它提供了一系列方法，可以让开发者通过调用这些方法，访问一些 JS 底层功能。由于它类似于其他语言的反射，因此取名为 Reflect。
2.它可以做什么？* 使用 Reflect 可以实现诸如：属性的赋值与取值、调用普通函数、调用构造函数、判断属性是否存在与对象中 等等功能。
3.这些功能不是已经存在了吗？为什么还需要用 Reflect 实现一次？* 有一个重要的理念，在 ES5 就被提出：减少魔法、让代码更加纯粹（语言的方法使用 API 实现，而不使用特殊语法实现），这种理念很大程度上是受到函数式编程的影响。* ES6 进一步贯彻了这种理念，它认为，对属性内存的控制、原型链的修改、函数的调用等等，这些都属于底层实现，属于一种魔法，因此，需要将它们提取出来，形成一个正常的 API，并高度聚合到某个对象中，于是就造就了 Reflect 对象。* 因此，你可以看到 Reflect 对象中有很多的 API 都可以使用过去的某种语法或其他 API 实现。
4.Reflect 里面提供了哪些 API 呢？| Reflect API | 用处 | 等同于 |
| :-: | :-: | :-: |
| Reflect.get(target, propertyKey) | 读取对象 target 的属性 propertyKey | 对象的属性值读取操作 |
| Reflect.set(target, propertyKey, value) | 设置对象 target 的属性 propertyKey 的值为 value | 对象的属性赋值操作 |
| Reflect.has(target, proper