Web前端Proxy和Reflect使用详解

小鱼儿 2023-10-02 19:57 22阅读 0赞

#### 文章目录 ####

*   *  1.监听对象的操作
     *  2.Proxy的使用
     *   *  2.1 Proxy基本使用
         *  2.2 set和get捕获器
         *  2.3 Receiver的作用
         *  2.4 Proxy所有捕获器
         *  2.5 construct和apply捕获器
     *  3.Reflect的使用
     *   *  3.1 Reflect的作用
         *  3.2 Reflect的方法
         *  3.3 Reflect的使用
         *  3.4 Reflect的construct

### 1.监听对象的操作 ###

**我们先来看一个需求：有一个对象，我们希望监听这个对象中的属性被设置或获取的过程**

*  通过我们前面所学的知识，能不能做到这一点呢？
 *  其实是可以的，我们可以**通过之前的属性描述符中的存储属性描述符**来做到；

下面这段代码就利用了前面讲过的 **Object.defineProperty 的存储属性描述符**来对属性的操作**进行监听**(这也是**Vue2响应式原理最核心的一段代码**)。

**但是这样做有什么缺点呢？**

*  首先，**Object.defineProperty设计的初衷**，**不是为了去监听截止一个对象中**  
    **所有的属性**的。
 *  我们在定义某些属性的时候，初衷其实是定义普通的属性，但是后面我们强  
    行将它变成了数据属性描述符。
 *  其次，**如果我们想监听更加丰富的操作，比如新增属性、删除属性，那么**  
    **Object.defineProperty是无能为力**的。

所以我们要知道，**存储数据描述符设计的初衷并不是为了去监听一个完整的对象。**

### 2.Proxy的使用 ###

#### 2.1 Proxy基本使用 ####

**在ES6中，新增了一个Proxy类，这个类从名字就可以看出来，是用于帮助我们创建一个代理的：**

*  也就是说，如果我们希望**监听一个对象的相关操作**，那么我们可以**先创建一个代理对象（Proxy对象）**；
 *  之后对**该对象的所有操作**，都通过**代理对象来完成**，代理对象**可以监听我们想要对原对象进行哪些操作**；

**我们可以将上面的案例用Proxy来实现一次：**

*  首先，我们需要**new Proxy对象**，**并且传入需要侦听的对象以及一个处理对象**，处理对象可以称之为**handler**；
    
        const p = new Proxy(target, handler);
 *  其次，**我们之后的操作都是直接对Proxy的操作**，而**不是原有的对象**，因为我们需要在handler里面进行侦听；

**演示代码:**

#### 2.2 set和get捕获器 ####

**如果我们想要侦听某些具体的操作，那么就可以在handler中添加对应的捕获器（Trap）：**

**set和get分别对应的是函数类型；**

*  set函数有四个参数：
    
    1.  **target**：目标对象（侦听的对象）；
    2.  **property**：将被设置的属性key；
    3.  **value**：新属性值；
    4.  **receiver**：调用的代理对象；
 *  get函数有三个参数：
    
    1.  target：目标对象（侦听的对象）；
    2.  property：被获取的属性key；
    3.  receiver：调用的代理对象；

我们**使用Proxy的set和get捕获器来监听对象中的属性被设置或获取的过程**

#### 2.3 Receiver的作用 ####

我们发现在使用getter、setter的时候有一个**receiver的参数**，它的作用是什么呢？

*  如果我们的源对象（obj）有**setter、getter的访问器属性**，那么可以**通过receiver来改原对象变里面的this**；

**我们来看这样一个对象:**  
![在这里插入图片描述][64bb9a68e4a945538b6d32464613b1d5.png_pic_center]

#### 2.4 Proxy所有捕获器 ####

**Proxy的13个捕获器分别是做什么的呢？**

1.  handler.getPrototypeOf()
    
     *  获取对象原型 (Object.getPrototypeOf 方法) 的捕捉器。
2.  handler.setPrototypeOf()
    
     *  设置对象原型 (Object.setPrototypeOf 方法) 的捕捉器。
3.  handler.isExtensible()
    
     *  判断是否可以新增属性 (Object.isExtensible 方法) 的捕捉器。
4.  handler.preventExtensions()
    
     *  阻止对象扩展 (Object.preventExtensions 方法) 的捕捉器。
5.  handler.getOwnPropertyDescriptor()
    
     *  Object.getOwnPropertyDescriptor 方法的捕捉器。
6.  handler.defineProperty()
    
     *  Object.defineProperty 方法的捕捉器。
7.  handler.ownKeys()
    
     *  Object.getOwnPropertyNames 方法和
     *  Object.getOwnPropertySymbols 方法的捕捉器。
8.  **handler.has()**
    
     *  in 操作符的捕捉器。
        
        可以用in判断对象中是否有某个属性, 这个判断的过程可以使用has捕获器监听
        
            const obj = {
                    
              name: "kaisa",
              age: 18,
              height: 1.88,
            };
            
            // 1.创建一个Proxy对象
            const objPro = new Proxy(obj, {
                    
              has: function (traget, key) {
                    
                console.log(`监听: 监听in判断 ${
                      key}属性`);
                return key in traget;
              },
            });
            
            console.log("age" in objPro); // true
9.  **handler.get()**
    
     *  属性读取操作的捕捉器。
10. **handler.set()**
    
     *  属性设置操作的捕捉器。
11. **handler.deleteProperty()**
    
     *  delete 操作符的捕捉器。
        
        get和set是没办法监听属性删除的
        
            const obj = {
                    
              name: "kaisa",
              age: 18,
              height: 1.88,
            };
            
            // 1.创建一个Proxy对象
            const objPro = new Proxy(obj, {
                    
              deleteProperty: function (traget, key) {
                    
                console.log(`监听:${
                      key}属性被删除了`);
                // 同时也需要删除原obj对象的name属性
                delete obj.name;
              },
            });
            
            delete objPro.name; // 监听:name属性被删除了
            console.log(obj); // {age: 18, height: 1.88}
12. **handler.apply()**
    
     *  函数调用操作的捕捉器。
13. **handler.construct()**
    
     *  new 操作符的捕捉器。

#### 2.5 construct和apply捕获器 ####

**当然，我们还会看到上面捕捉器中还有construct和apply，它们是应用于函数对象的：**

1.  **监听函数apply()方法调用**
    
        function foo(num1, num2) {
              
          console.log(this, num1, num2); // Number {123} 10 20
        }
        
        const fooProxy = new Proxy(foo, {
              
          apply: function (traget, thisArg, otherArg) {
              
            console.log("监听: foo函数执行了apply操作");
            traget.apply(thisArg, otherArg);
          },
        });
        
        fooProxy.apply(123, [10, 20]); // 监听: foo函数执行了apply操作
2.  **监听new操作符**
    
        function foo(num1, num2) {
              
          console.log(num1, num2); // 123 321
        }
        
        const fooProxy = new Proxy(foo, {
              
          construct: function (traget, otherArray) {
              
            console.log("监听: foo函数进行了new操作");
            return new traget(...otherArray);
          },
        });
        
        new fooProxy(123, 321); // 监听: foo函数进行了new操作

### 3.Reflect的使用 ###

#### 3.1 Reflect的作用 ####

**Reflect也是ES6新增的一个API，它是一个对象，字面的意思是反射。**

**那么这个Reflect有什么用呢？**

*  它主要提供了**很多操作JavaScript对象的方法**，有点**像Object中操作对象的方法**；
 *  比如\*\*Reflect.getPrototypeOf(target)\*\*类似于 **Object.getPrototypeOf(traget)**；
 *  比如**Reflect.defineProperty(target, propertyKey, attributes)类似于Object.defineProperty(target, propertyKey, attributes)** ；

我们很容易产生一个疑惑, 如果我们有Object可以做这些操作，那么**为什么还需要有Reflect这样的新增对象呢**？

*  这是因为在早期的ECMA规范中没有考虑到这种**对 对象本身 的操作如何设计会更加规范**，**所以将这些API放到了Object上面作为类方法**；
 *  但是**Object作为一个构造函数**，这些操作实际上**放到它身上并不合适**；
 *  另外**还包含一些类似于 in、delete操作符**，让JS看起来是**会有一些奇怪**的；
 *  所以**在ES6中新增了Reflec**t，让我们这些操作都**集中到了Reflect对象**上；
 *  另外**在使用Proxy时**，可以做到**不操作原对象**；

**那么Object和Reflect对象之间的API关系，可以参考MDN文档：**

*  https://developer.mozilla.org/zhCN/docs/Web/JavaScript/Reference/Global\_Objects/Reflect/Comparing\_Reflect\_and\_Object\_methods

#### 3.2 Reflect的方法 ####

**Reflect中有哪些常见的方法呢？它和Proxy是一一对应的，也是13个：**

1.  Reflect.getPrototypeOf(target)
    
     *  类似于 Object.getPrototypeOf()。
2.  Reflect.setPrototypeOf(target, prototype)
    
     *  设置对象原型的函数. 返回一个 Boolean， 如果更新成功，则返回true。
3.  Reflect.isExtensible(target)
    
     *  类似于 Object.isExtensible()
4.  Reflect.preventExtensions(target)
    
     *  类似于 Object.preventExtensions()。返回一个Boolean。
5.  Reflect.getOwnPropertyDescriptor(target, propertyKey)
    
     *  类似于 Object.getOwnPropertyDescriptor()。如果对象中存在该属性，则返回对应的属性描述符, 否则返回 undefined.
6.  Reflect.defineProperty(target, propertyKey, attributes)
    
     *  和 Object.defineProperty() 类似。如果设置成功就会返回 true
7.  Reflect.ownKeys(target)
    
     *  返回一个包含所有自身属性（不包含继承属性）的数组。(类似于Object.keys(), 但不会受enumerable影响).
8.  **Reflect.has(target, propertyKey)**
    
     *  判断一个对象是否存在某个属性，和 in 运算符 的功能完全相同。
9.  **Reflect.get(target, propertyKey\[, receiver\])**
    
     *  获取对象身上某个属性的值，类似于 target\[name\]。
10. **Reflect.set(target, propertyKey, value\[, receiver\])**
    
     *  将值分配给属性的函数。返回一个Boolean，如果更新成功，则返回true。
11. **Reflect.deleteProperty(target, propertyKey)**
    
     *  作为函数的delete操作符，相当于执行 delete target\[name\]。
12. Reflect.apply(target, thisArgument, argumentsList)
    
     *  对一个函数进行调用操作，同时可以传入一个数组作为调用参数。和Function.prototype.apply() 功能类似。
13. Reflect.construct(target, argumentsList\[, newTarget\])
    
     *  对构造函数进行 new 操作，相当于执行 new target(…args)。

#### 3.3 Reflect的使用 ####

**那么我们可以将之前Proxy案例中对原对象的操作，都修改为Reflect来操作(一般情况下, Reflect和Proxy经常共同完成代理)**:

#### 3.4 Reflect的construct ####

这个方法用的很少, 但是某些特殊场景会运用到

Reflect.construct(使用哪个类创建, [参数], 创建哪个类的实例)

例如, 我们有两个构造函数, 一个构造函数是没有对应的操作, 我们可以使用construct借用另一个构造函数创建类

function Person(name, age) {
        
      this.name = name;
      this.age = age;
    }
    
    function Student() {
        }
    
    // 使用Person创建Student的实例
    const stu = Reflect.construct(Person, ["kaisa", 18], Student);
    // 同时创建的实例的隐式原型, 依然指向Student的显式原型
    console.log(stu.__proto__ === Student.prototype); // true

[64bb9a68e4a945538b6d32464613b1d5.png_pic_center]: https://img-blog.csdnimg.cn/64bb9a68e4a945538b6d32464613b1d5.png#pic_center