ES6标准入门 - Reflect

在学习ES6的过程中，相信很多人都和我一样，对Reflect对象感到困惑。"Reflect到底是什么？它有什么用？"这些问题曾经萦绕在我的脑海中。今天，让我们一起来揭开Reflect的神秘面纱，从疑惑到领悟，体验学习的乐趣。

什么是 Reflect

Reflect是ES6引入的一个新的全局对象，它提供了一系列方法来操作对象。简单来说，Reflect是用来调用对象的基本操作或内部方法的。

但是等等，我们不是一直在操作对象吗？为什么还需要Reflect呢？让我们继续往下看。

首先了解对象的基本操作：内部方法揭秘

对象是 JavaScript 中最基本的数据结构之一，它允许我们以键值对的形式存储和操作数据。在深入了解对象的基本操作之前，我们需要了解一些内部方法和机制

对象的基本操作

创建对象 对象字面量和 Object 构造函数
访问和修改属性 使用（.）或括号（\[\]）语法
删除属性 delete 操作符
遍历属性 for...in 循环遍历对象可枚举属性
对象的内部方法 $\[Get$ ] | $\[Set$ ] | $\[Delete$ ] | $\[HasProperty$ ] 等等

当我们访问对象属性时，JavaScript引擎会在内部调用对应的内部方法。虽然我们看不到这些内部方法，但它们的确在后台执行了一系列操作。例如：

JAVASCRIPT 复制代码

const person = {
  name: 'John',
  age: 30
};

// [[Get]] 当访问对象的属性时，调用 [[Get]] 方法
console.log(person.name); // John

// [[Set]] 当设置对象的属性时，调用 [[Set]] 方法
person.age = 31;
console.log(person.age); // 31

// [[Delete]] 当删除对象的属性时，调用 [[Delete]] 方法
delete person.age;
console.log(person.age); // undefined

// [[HasProperty]] 当使用 in 操作符检查属性是否存在时，调用 [[HasProperty]] 方法
console.log('name' in person); // true
console.log('age' in person); // false

// [[Enumerate]] 当使用 for...in 循环遍历对象的属性时，调用 [[Enumerate]] 方法
for (let key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(`${key}: ${person[key]}`);
  }
}

为什么选择Reflect

例如Object.defineProperty在对一个不可写且不可配置的属性读取时会抛出TypeError，通常我们需要使用try catch去捕获这个错误，但使用Reflect.defineProperty则不会，而是会返回false来代表此次操作失败。

你要知道，如果只是抛出异常，我们在开发环境下，浏览器可能会打印很多console.log(),从而导致我们忽略了该错误，但是，如果是直接返回false或undefined，这就会引起我们的注意，确保我们不会错过任何错误提示。所以，这就是我选择Reflect的原因。

Reflect 的静态方法

这里有13种方法，我就不一一列举了，大家可以直接参考 MDN-Reflect-静态方法，Reflect对象的方法与Proxy一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。

具体参考

为什么Vue3要在Proxy中使用Reflect

保持正确的 this 绑定

vue3使用Reflect的最主要原因。在Proxy的处理函数中，如果我们直接返回原始对象上的属性或方法，this可能会指向错误的对象。使用Reflect可以保证this始终指向正确的对象。

JAVASCRIPT 复制代码

   const target = {
     foo: 1,
     bar() { console.log(this.foo) }
   };

   const handler = {
     get(target, property, receiver) {
     
       // 如果直接返回，可能会导致this绑定错误
       // return target[property];
          
       // 使用Reflect
       return Reflect.get(target, property, receiver);
     }
   };

   const proxy = new Proxy(target, handler);

   proxy.bar(); // 正确输出：1

   -----------------------------------------------------------------------------
   如果我们在get捕获器中直接返回target[property]，当调用proxy.bar()时，
   bar方法内的this会指向原始的target对象，而不是proxy对象。
   使用Reflect.get可以确保this正确地绑定到proxy对象

处理数组问题

在Vue3中，当我们使用数组方法如push、pop等时，这些方法可能会隐式地修改数组的length属性。使用Reflect可以确保这些隐式修改也能被正确地拦截和处理

JAVASCRIPT 复制代码

    const handler = {
      set(target, property, value, receiver) {
        console.log(`Setting ${property} = ${value}`);
        return Reflect.set(target, property, value, receiver);
      }
    };

    const array = new Proxy([], handler);
    array.push(1); // 会同时触发对 '0' 和 'length' 的设置

`receiver` 参数

Reflect.get(target, propertyKey, receiver)

Reflect.set(target, propertyKey, value, receiver)

在 get 和 set 上都有一个特殊的参数 receiver ，通常指的是最初触发这个操作的对象，在大多数情况下，它就是 Proxy 对象本身，该参数就是去改变 this 的指向的，指向代理对象。

示例假设我们有一个对象，其中包含一些基本属性和一个计算属性

JAVASCRIPT 复制代码

const originalObj = {
  firstName: 'John',
  lastName: 'Doe',
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
};

const handler = {
  get(target, property, receiver) {
    console.log(`Getting ${property}`);
    return Reflect.get(target, property, receiver);
  }
};

const proxy = new Proxy(originalObj, handler);

console.log(proxy.fullName); // 输出：Getting fullName 然后输出 "John Doe"

在这个示例中  receiver 确保了 fullName getter 中的 this 指向 proxy，
而不是 originalObj。这意味着如果我们通过 proxy 修改 firstName 或 lastName，fullName 会正确反映这些变化

总结

Reflect是ES6引入的一个全局对象，它提供了一组方法来操作对象，使得对象操作更加一致和直观。相比传统方法，Reflect在失败时返回false或undefined，避免了异常处理的复杂性。结合Proxy使用，Reflect可以确保正确的this绑定和处理数组等特殊情况，增强了对象操作的灵活性和安全性。这些优势使得Reflect在现代JavaScript开发中变得非常有用。

如果文中有任何不准确之处，欢迎大家指正。

ES6标准入门 - Reflect

什么是 Reflect

首先了解对象的基本操作：内部方法揭秘

对象的基本操作

为什么选择Reflect

Reflect 的静态方法

为什么Vue3要在Proxy中使用Reflect

receiver 参数

示例 假设我们有一个对象，其中包含一些基本属性和一个计算属性

总结

`receiver` 参数

示例假设我们有一个对象，其中包含一些基本属性和一个计算属性