JavaScript Reflect 对象详解与 Proxy 配合使用指南

1、前言

根据 MDN 官网的解释：Reflect 是一个内置对象，它提供了拦截 JavaScript JavaScript 操作的方法。这些方法与 proxy handlers (en-US) 中定义的方法完全一致。需要注意的是，Reflect 并非函数对象，因此无法通过 new 关键字进行构造。

那么它到底是什么？根据上面文件介绍会发现它和 Proxy 极像，都是获取执行函数本身信息。主要区别在于所有函数对象属性过于复杂，且额外增加可能导致程序行为不合理，因此扩展 Reflect 函数以专门处理函数对象的调用方法、构造对象以及获取或设置属性等相关操作。

2、接口

Reflect 内部定义的所有方法均为静态方法，开发者无需进行构造函数调用或实例化操作即可直接使用。

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

3、简单的例子

假设现在有一个如下定义的函数：

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
  }
  get getName() {
    return this.firstName + ' ' + this.lastName
  }
}

在正常使用场景中，只需进行实例化操作即可：

const person = new Person('Jaxson', 'Wang')
console.log(person.getName) // Jaxson Wang

此外，还可以使用 Reflect.construct() 方法来创建对象：

const person = Reflect.construct(Person, ['Jaxson', 'Wang'])
console.log(person) // Jaxson Wang

4、结语

对象经常与 Proxy 代理配合使用，主要原因有三点：

• 首先，Reflect 提供的所有静态方法与 Proxy 第2个参数 handle 中的方法是一模一样的。
• 其次，Proxy get/set() 方法所需的返回值正是 Reflect的 get/set 方法的返回值，两者可以天然配合使用，相比直接进行对象赋值或获取值，这种方式更加便捷且准确。
• 最后，receiver 参数具有不可替代性。

到此这篇关于 JavaScript 反射学习技巧的文章就介绍到这了，更多相关 JavaScript 反射内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！