玩转 JavaScript 反射（Reflect）

引言

反射的基本概念及其在JavaScript中的作用：

反射其实就是一种编程的概念，它存在于很多现代编程语言之中：Java ，C#等等，它允许程序在运行时检查和修改其自身的结构和行为。

在 JavaScript 中，通常通过使用 Reflect 对象来实现反射，它提供一系列静态方法，用于执行操作和获取信息，这些操作和信息原本由内置的操作符提供，如点操作符.、方括号操作符[]、new等。

引入反射的动机：

既然要引入反射，那么它肯定是因为要去解决什么问题才会被引入的，这也就是引入反射的动机。

操作的一致性：

在传统操作符如.、[]、new等在不同场景下可能行为不一致。例如，使用.访问属性时，如果属性名包含特殊字符或保留字，将会报错。Reflect.get()和Reflect.set()等方法则可以处理任何属性名，提供了一种更一致的访问和修改对象属性的方式。

// 操作的一致性
'use strict';

let obj = {
  'property name': 'value', // 属性名包含空格
  'my-property': 'value',   // 属性名包含破折号
  for: 'value'              // 属性名是一个保留字
};

console.log(obj['property name']); // 输出 'value'
console.log(obj['my-property']);   // 输出 'value'
console.log(obj['for']);           // 输出 'value'

console.log(obj.property name); // 错误
console.log(obj.my-property);   // 错误
console.log(obj.for);           // 错误，在严格模式下会报错

// 使用反射
console.log(Reflect.get(obj, 'property name')); // 输出 'value'
console.log(Reflect.get(obj, 'my-property')); // 输出 'value'
console.log(Reflect.get(obj, 'for')); // 输出 'value'

按理来说上面的 [] 和 . 的方式都是取出对象对应的属性，但是你会发现它们会出现不同，当我们通过 . 的方式会出现编译错误，而通过 [] 则是正常的。这里就出现了操作的不一致性，但是当我们通过 Reflect 就能够保证操作的一致性。

错误处理：

传统操作符在操作失败的时候往往是没有明确的错误反馈的。例如，当我们通过 . 的方式去访问不存在的属性，会得到 undefined ，而不会抛出错误。 除非你在严格模式下访问一个未定义的属性，那样会抛出一个ReferenceError。

• Reflect.get：当尝试获取一个不存在的属性时，Reflect.get同样返回undefined。然而，如果对象是不可扩展的，或者属性不在原型链上，Reflect.get仍然会返回undefined，但它提供了一种更一致的访问方式，尤其是在使用Proxy时。
• Reflect.set：当尝试设置一个不存在的属性时，如果对象是可扩展的，Reflect.set将返回true，表示操作成功。如果对象是不可扩展的，或者如果设置了某个不可写的属性，Reflect.set将返回false，这提供了一种明确的反馈，表明操作失败。

let obj = {};
let result = Reflect.set(obj, 'nonExistentProp', 'value');
console.log(result); // 输出: true，因为对象是可扩展的

Object.preventExtensions(obj);
result = Reflect.set(obj, 'anotherProp', 'value');
console.log(result); // 输出: false，因为对象现在是不可扩展的

元编程和代理：

我们清楚在 Vue 3 创建响应式变量时，我们会使用 Proxy 对象配合反射一起来使用，实现用于拦截和自定义对象的访问行为。

// 定义操作
const handlers = {
  get: function (target, key, receiver) {
    console.log(`get ${key}`); // 打印对应想要获取的属性
    return Reflect.get(target, key, receiver) || 'default value';
  }
}

let obj = {};
let proxy = new Proxy(obj, handlers);
console.log(proxy.someProperty); // 输出 'default value'

提醒一下这里的 receiver 形参的作用是修改 this 指向的作用，我来举个例子：

let obj = {
  _secret: 'hidden',
  get secret() {
    return this._secret;
  }
}

let proxy = new Proxy(obj, {});

// 不提供 receiver 参数，所以 this 将会是 obj
console.log(Reflect.get(proxy, 'secret')); // 输出 'hidden'

// 提供 receiver 参数，但这个对象没有 _secret 属性
let emptyObj = {};
console.log(Reflect.get(proxy, 'secret', emptyObj)); // 输出 undefined

当secret属性被访问时，getter方法被调用。在第一次调用Reflect.get()时，由于没有显式提供receiver，this的值默认为proxy对象，它委托给了obj对象，因此_secret属性可以被正确访问。而在第二次调用Reflect.get()时，receiver被显式设置为emptyObj，由于emptyObj中没有_secret属性，因此secret的getter方法返回undefined。

动态类型检查和运行时绑定：

Reflect提供了construct和apply方法，可以用来动态地调用函数和构造函数，这对于实现动态类型检查和运行时绑定非常有用。

// 动态类型检查和运行时绑定：
function Person(name) {
  this.name = name;
}

let person = Reflect.construct(Person, ['John Doe']);
console.log(person.name); // 输出 'John Doe'

反射基础

反射API：

Reflect.get()：

• 用于获取对象的属性值。

// Reflect.get()：
let obj = {foo: 'bar'};
console.log(Reflect.get(obj, 'foo')); // 输出：bar

Reflect.set()：

• 用于设置对象的属性值。

// Reflect.set()：
let obj = { foo: 'bar' };
const setReturn = Reflect.set(obj, 'age', 18);
console.log(setReturn); // 输出：true
console.log(obj.age); // 输出：18

Reflect.has()：

• 用来判断对象是否存在指定的属性值。

// Reflect.has()：
let obj = { foo: 'bar' };
const hasReturn = Reflect.has(obj, 'foo');
console.log(hasReturn); // 输出：true

Reflect.ownKeys()：

• 输出对象所有的属性值，即返回对象的所有自身属性键的数组。

// Reflect.ownKeys()：
let obj = { foo: 'bar' };
console.log(Reflect.ownKeys(obj)); // 输出：[ 'foo' ]

Reflect.apply()：

• 修改对象的 this 指向。

// Reflect.apply()：
function greet(greeting) {
  return greeting + ',' + this.name;
}

let user = { name: 'John Doe' };
console.log(Reflect.apply(greet, user, ['hello'])); // 输出：hello,John Doe

Reflect.construct()：

• 创建一个新实例，并调用构造函数。

// Reflect.construct()：
class Person {
  constructor(name) {
    this.name = name;
  }
}

let person = Reflect.construct(Person, ['John Doe']); // 输出：John Doe
console.log(person.name);

上面就是 Reflect 对象的一些基本方法，通过对上面方法的了解和使用可以保证你正确的使用反射。

使用场景：

属性访问与修改：

对于这个使用场景，我在上面也介绍过，你可以看一下上面的代码，然后结合Reflect.get() 和 Reflect.set() 提供了一种更一致的方式来访问和修改对象的属性。

拦截器与代理：

对于拦截器上面也介绍过，通常我们是通过 Proxy 对象和 Reflect 来实现，Reflect 去实现 Proxy 对象里面拦截的操作 （handler）。

构造函数调用：

其实这个例子就是上面使用到的Reflect.construct()。

那我在这里我想要强调一下 new关键字与Reflect.construct()的不同：

• 其实最主要的不同就是动态性，在我们使用 new 的时候需要显式的去调用构造函数，这就限制了你在运行时选择构造函数的能力。Reflect.construct()允许你在运行时动态地决定要调用哪个构造函数，因为构造函数可以作为参数传递给Reflect.construct()。

• 多态性：new关键字调用构造函数时，this的原型链将由构造函数决定。

  Reflect.construct()允许你显式地指定newTarget参数，这可以让你在构造函数调用时改变this的原型链。

实战案例：

属性的批量操作：

// 属性的批量操作：演示如何使用反射API遍历和操作对象的所有属性。
const obj = { name: 'John', age: 30 };
for (let key of Reflect.ownKeys(obj)) {
  console.log(key); // 输出：name, age
  console.log(Reflect.get(obj, key)); // 输出：John, 30
  Reflect.set(obj, key, 'New Value');
  console.log(Reflect.get(obj, key)); // 输出：New Value
}

函数调用优化：

// 函数调用优化
function greet(greeting, who) {
  return `${greeting}, ${who}!`;
}

const context = {};
const args = ['Hello', 'John'];
const result = Reflect.apply(greet, context, args);
console.log(result); // 输出 Hello, John!

虽然 Reflect.apply() 和Reflect.call() 并不一定比我们传统的 apply() 和 call()更加高效，但是在频繁传递上下文的情况下，使用它们可以提供更好的可读性和上下文管理。

高级话题

框架和库的应用：

TypeScript 的装饰器中就应用了反射。

这个我们在后面补充了装饰器概念之后，在装饰器的博客详细玩一下这个。

最佳实践与陷阱

性能考量：

从性能上面来讲，它肯定通常是不如直接访问或操作对象属性快。比如说 Reflect.get 和 Reflect.set 方法需要查找属性的描述符，检查访问权限，以及其它可能存在的运行时检查，而直接使用 obj['prop'] 或 obj.prop 则可以直接访问属性。

所以在一些对于性能要求高的代码中，应尽量少使用反射API，尤其是当相同的操作可以使用更直接的方法时。例如，在循环中频繁使用Reflect.get和Reflect.set可能会显著降低性能。如果可能，应优先考虑使用直接属性访问或预先定义的方法，以减少运行时开销。

错误处理：

在使用反射API时，可能会遇到以下几种类型的错误和异常：

1. 属性不存在：尝试使用Reflect.get或Reflect.set访问或修改一个不存在的属性时，Reflect.get将返回undefined，而Reflect.set将尝试在对象上创建该属性，如果对象是不可扩展的，则返回false。
2. 类型错误：如果尝试使用Reflect.set设置一个只读属性，或者在访问器属性上没有适当的getter或setter方法，将会发生类型错误。
3. 权限错误：如果对象的属性是不可配置或不可写，使用Reflect.defineProperty或Reflect.deleteProperty可能会失败。

所以我们需要去对这些错误进行异常处理，比如说使用 try...catch...，打印出错误，或者先使用 Reflect.has 检查属性的存在性以及 Reflect.getOwnPropertyDescriptor检查属性描述符观察对应对象的属性是否可以枚举，可以修改等等。

结论

• Reflect 提供了一系列的方法，允许开发者在运行时对对象进行内省和操作。

• 这些方法提供了一种更一致的方式来处理对象属性和函数调用，避免了传统操作符的局限性和不一致行为。

• Reflect API 与Proxy对象结合使用，为实现拦截器、动态类型检查、运行时绑定和自定义对象行为提供了强大工具。

• 包括许多的现代框架和库，如 Angular 和 MobX ，利用Reflect API 来实现依赖注入、状态管理和元数据处理等功能。

所以掌握Reflect API 对于开发者而言具有重要的意义。

希望能对您的学习有帮助！如果有什么问题，欢迎您跟我一起交流交流！