JavaScript - Reflect 对象

JavaScript Reflect

在 JavaScript 中，Reflect 是一个全局对象，并在 ECMAScript 6 (ES6) 中引入。它包含静态方法，提供了一种更好的方式在运行时与对象进行交互。

与大多数全局对象不同，Reflect 不是构造函数。您不能使用 new 运算符或将 Reflect 对象作为函数调用。Reflect 的所有方法都是静态的，就像 Math 对象一样。

它包含各种方法，可以在运行时访问、更新、删除等对象的属性。

Reflect 对象的关键特性

对象构造 - Reflect API 允许使用 Reflect.construct() 方法在运行时创建对象。
函数调用 - Reflect API 的 apply() 方法用于通过传递上下文和参数来调用函数或对象方法。
对象属性操作 - Reflect API 具有不同的方法来设置、更新或删除对象属性。此外，它还可以通过阻止它来处理对象的扩展。

语法

以下是使用 Reflect API 方法的语法：

Reflect.method();

在上述语法中，“method”是泛化。它可以是 Reflect API 的任何方法，例如 get、set、apply、construct、has 等。

Reflect 方法

在下表中，我们列出了 Reflect 的所有方法：

序号	名称和描述
1	apply() 调用函数。
2	construct() 允许指定不同的原型。
3	defineProperty() 允许插入或编辑对象属性。
4	deleteProperty() 允许删除对象属性。
5	get() 获取属性的值。
6	getOwnPropertyDescriptor() 允许获取对象的描述符。
7	getPrototypeOf() 获取对象的原型。
8	has() 检查属性是否存在于对象中。
9	isExtensible() 检查对象是否可扩展。
10	ownKeys() 返回目标对象自己的键，并忽略继承的键。
11	preventExtensions() 阻止对象的扩展。
12	set() 将值设置为对象属性。
13	setPrototypeOf() 允许将对象的原型设置为 null 或另一个对象。

示例

示例 1

在下面的示例中，我们定义了一个 car 对象。“prop”变量以字符串格式包含属性名称。

我们使用 Reflect 对象的 get() 方法从 car 对象访问“model”属性。我们将对象名称作为 get() 方法的第一个参数，将属性名称作为第二个参数传递。

在输出中，您可以看到“model”属性的值。

<html>
   <body>
      <div id="output">The model of the car is: </div>
      <script>
         const car = {
            name: "Audi",
            model: "Q6",
            price: 7000000,
         }
         let prop = "model";
         let model = Reflect.get(car, prop);
         document.getElementById("output").innerHTML += model;
      </script>
   </body>
</html>

输出

The model of the car is: Q6

示例 2

在下面的示例中，我们使用了 `set()` 方法将属性设置到对象中。`set()` 方法接受对象、属性名称和值作为参数。

输出显示了 'doors' 属性的值。通过这种方式，您可以使用 Reflect API 的 `set()` 方法在运行时将属性设置到对象中。

<html>
   <body>
      <div id="output">The total doors in the Audi Q6 is: </div>
      <script>
         const car = {
            name: "Audi",
            model: "Q6",
            price: 7000000,
         }
         const model = Reflect.set(car, "doors", 4);
         document.getElementById("output").innerHTML += car.doors;
      </script>
   </body>
</html>

输出

The total doors in the Audi Q6 is: 4

执行上述脚本后，输出窗口将弹出，并在网页上显示文本。

示例 3

在下面的示例中，我们使用了 `has()` 方法来动态检查某个属性是否存在于对象中。

这两个符号看起来相似，但实际上是不同的，您可以在输出中看到这一点。

<html>
   <body>
      <p id="output"></p>
      <script>
         const car = {
            name: "Audi",
            model: "Q6",
            price: 7000000,
         }
         const isName = Reflect.has(car, "name");
         if (isName) {
            document.getElementById("output").innerHTML = "The Car object contains the name.";
         }
      </script>
   </body>
</html>

输出

The Car object contains the name.

打印页面