Web前端Proxy和Reflect使用详解

文章目录

1.监听对象的操作

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

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

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

const obj = {
  name: "kaisa",
  age: 18,
  height: 1.88,
};

const keys = Object.keys(obj);
for (const key of keys) {
  let value = obj[key];
  Object.defineProperty(obj, key, {
    set: function (newValue) {
      console.log(`${key}属性设置了新的值:${newValue}`);
      value = newValue;
    },
    get: function () {
      console.log(`获取${key}的值`);
      return value;
    },
  });
}

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

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

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

2.Proxy的使用

2.1 Proxy基本使用

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

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

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

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

演示代码:

const obj = {
  name: "kaisa",
  age: 18,
  height: 1.88,
};

// 1.创建一个Proxy对象
const objPro = new Proxy(obj, {});

// 2.对obj所有操作, 我们应该去对objPro这个代理进行操作
console.log(objPro.name); // kaisa
objPro.name = "coder";
console.log(obj.name); // coder
console.log(obj); // {name: 'coder', age: 18, height: 1.88}

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捕获器来监听对象中的属性被设置或获取的过程

const obj = {
  name: "kaisa",
  age: 18,
  height: 1.88,
};

const objPro = new Proxy(obj, {
  set: function (traget, key, newValue) {
    console.log(`监听: ${key}属性发生了改变`, newValue);
    traget[key] = newValue;
  },

  get: function (traget, key) {
    console.log(`监听: ${key}属性被获取`);
    return traget[key];
  },
});

2.3 Receiver的作用

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

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

我们来看这样一个对象:

2.4 Proxy所有捕获器

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

handler.getPrototypeOf()
- 获取对象原型 (Object.getPrototypeOf 方法) 的捕捉器。
handler.setPrototypeOf()
- 设置对象原型 (Object.setPrototypeOf 方法) 的捕捉器。
handler.isExtensible()
- 判断是否可以新增属性 (Object.isExtensible 方法) 的捕捉器。
handler.preventExtensions()
- 阻止对象扩展 (Object.preventExtensions 方法) 的捕捉器。
handler.getOwnPropertyDescriptor()
- Object.getOwnPropertyDescriptor 方法的捕捉器。
handler.defineProperty()
- Object.defineProperty 方法的捕捉器。
handler.ownKeys()
- Object.getOwnPropertyNames 方法和
- Object.getOwnPropertySymbols 方法的捕捉器。

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

handler.get()
- 属性读取操作的捕捉器。
handler.set()
- 属性设置操作的捕捉器。

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}

handler.apply()
- 函数调用操作的捕捉器。
handler.construct()
- new 操作符的捕捉器。

2.5 construct和apply捕获器

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

监听函数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操作

监听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中新增了Reflect，让我们这些操作都集中到了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个：

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

3.3 Reflect的使用

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

const obj = {
  name: "kaisa",
  age: 18,
  height: 1.88,
};

const objProxy = new Proxy(obj, {
  set(traget, key, newValue) {
    console.log(`监听: ${key}属性发生了改变`);
    // 好处一: 代理对象的目的就是不在操作原对象, Reflect就不在操作原对象
    // 好处二: Reflect.set()方法会返回一个布尔值, 可以用来判断操作是否成功
    const isSuccess = Reflect.set(traget, key, newValue);
    if (isSuccess) {
      console.log(`${key}属性设置成功`);
    } else {
      console.log(`${key}属性设置失败`);
    }
  },

  get(traget, key) {
    console.log(`监听: ${key}属性被获取了`);
    return Reflect.get(traget, key);
  },

  has(traget, key) {
    console.log(`监听: 对象是否含有${key}属性`);
    return Reflect.has(traget, key);
  },

  deleteProperty(traget, key) {
    console.log(`监听: ${key}属性被删除`);
    return deleteProperty(traget, key);
  },
});

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