ES7 之 Reflect 详解-JavaScript中文网-JavaScript教程资源分享门户

ES7 中的 Reflect 是一个将“元编程”功能添加到 JavaScript 的新对象。它不仅仅是一个对象，而是一个静态类，包含多个用于检查和操作 JavaScript 对象的静态方法。 Reflect 构造函数无法用于创建新对象，因此，Reflect 对象是一个“静态对象”。

为什么需要 Reflect？

在 ES6 中，我们引入了 Proxy 对象来提供可对对象执行代理操作的功能。Proxy 构造函数创建一个新的代理对象，可以拦截其它对象的操作，并在不在原始对象上进行操作之前执行自定义代码。例如，我们可以使用 Proxy 拦截 get、set、has、deleteProperty 等操作，并在实际访问原始对象之前，根据需要修改或拦截这些操作。

然而，Proxy 与 ES6 添加的其他功能一样，在某些情况下会存在模糊或问题，例如代理对象是否返回正确的值。这就是引入 Reflect 的原因。Reflect 可以提供代理对象缺失的某些功能，并消除 Proxy 使代理对象更复杂的缺点。

Reflect 的静态方法

Reflect 包含以下方法：

Reflect.apply()
Reflect.construct()
Reflect.defineProperty()
Reflect.deleteProperty()
Reflect.get()
Reflect.getOwnPropertyDescriptor()
Reflect.getPrototypeOf()
Reflect.has()
Reflect.isExtensible()
Reflect.ownKeys()
Reflect.preventExtensions()
Reflect.set()
Reflect.setPrototypeOf()

我们将逐一介绍这些方法。

1. Reflect.apply()

Reflect.apply() 方法调用具有给定 this 和参数的函数。

const arrSum = Reflect.apply([1, 2, 3, 4, 5].reduce, null, [function(a, b) { return a + b; }]);
console.log(arrSum); // 15

2. Reflect.construct()

Reflect.construct() 方法创建一个新的实例对象，使用给定的参数作为构造函数的参数列表，并返回该实例。

-- -------------------- ---- -------
----- ------- -
  -------------- -- -
    ------ - --
    ------ - --
  -
-
----- ------- - -------------------------- ---- -----
----------------------- -- --
----------------------- -- --

3. Reflect.defineProperty()

Reflect.defineProperty() 方法定义一个属性描述符。

const obj = {};
Reflect.defineProperty(obj, 'x', { value: 10, writable: true });
console.log(obj.x); // 10

4. Reflect.deleteProperty()

Reflect.deleteProperty() 方法从对象中删除一个属性。

const obj = { x: 10, y: 20 };
Reflect.deleteProperty(obj, 'x');
console.log('x' in obj); // false
console.log(obj); // { y: 20 }

5. Reflect.get()

Reflect.get() 方法返回一个对象的指定属性的值。

const arr = [1, 2, 3];
console.log(Reflect.get(arr, 'length')); // 3

6. Reflect.getOwnPropertyDescriptor()

Reflect.getOwnPropertyDescriptor() 方法返回指定对象上一个自有属性对应的属性描述符。

const obj = { x: 10 };
console.log(Reflect.getOwnPropertyDescriptor(obj, 'x'));
// { value: 10, writable: true, enumerable: true, configurable: true }

7. Reflect.getPrototypeOf()

Reflect.getPrototypeOf() 方法返回对象的原型。

const obj = { x: 10 };
console.log(Reflect.getPrototypeOf(obj)); // {}

8. Reflect.has()

Reflect.has() 方法返回一个布尔值，表明对象是否具有指定属性。

const obj = { x: 10 };
console.log(Reflect.has(obj, 'x')); // true
console.log(Reflect.has(obj, 'y')); // false

9. Reflect.isExtensible()

Reflect.isExtensible() 方法返回一个布尔值，表明对象是否可扩展。

const obj = { x: 10 };
console.log(Reflect.isExtensible(obj)); // true
Reflect.preventExtensions(obj);
console.log(Reflect.isExtensible(obj)); // false

10. Reflect.ownKeys()

Reflect.ownKeys() 方法返回由给定对象的自身属性键组成的数组。

const obj = { x: 10, y: 20 };
console.log(Reflect.ownKeys(obj)); // ['x', 'y']

11. Reflect.preventExtensions()

Reflect.preventExtensions() 方法禁止在对象上添加新属性。

const obj = { x: 10 };
Reflect.preventExtensions(obj);
obj.y = 20;
console.log(obj); // { x: 10 }

12. Reflect.set()

Reflect.set() 方法将值分配给对象的指定属性，如果属性不存在，则会创建该属性。

const obj = { x: 10 };
Reflect.set(obj, 'y', 20);
console.log(obj); // { x: 10, y: 20 }

13. Reflect.setPrototypeOf()

Reflect.setPrototypeOf() 方法设置对象的原型（即内部的 [[Prototype]] 属性）。

const obj1 = { x: 10 };
const obj2 = { y: 20 };
Reflect.setPrototypeOf(obj2, obj1);
console.log(obj2.x); // 10

使用 Reflect 简化编程

Reflect 对象的静态方法使编程更加简单。我们可以使用 Reflect.set() 和 Reflect.get() 方法来读取和设置对象的属性值，而非直接使用对象的属性。

const obj = { x: 10 };
Reflect.set(obj, 'y', 20);
console.log(Reflect.get(obj, 'y')); // 20

使用 Reflect.defineProperty() 方法来定义一个属性描述符。

const obj = {};
Reflect.defineProperty(obj, 'x', { value: 10, writable: true });
console.log(Reflect.get(obj, 'x')); // 10

在本例中，如果我们尝试使用 obj.x = 20; 的方式来设置 x 的值，则操作将失败，因为我们已经将 writable 属性设置为 false。

使用 Reflect.has() 方法来检查对象是否具有给定属性。

const obj = { x: 10 };
console.log(Reflect.has(obj, 'x')); // true
console.log(Reflect.has(obj, 'y')); // false

在本例中，Reflect.has() 方法具有同样的行为，与 obj.hasOwnProperty('x'); 方法相同。

结论

在本文中，我们介绍了 ES7 添加的 Reflect 对象，并逐一介绍了它的静态方法。Reflect 对象可以帮助我们更加轻松地进行元编程，使代码更加简洁。此外，我们还介绍了一些使用 Reflect 的示例来说明它的正确使用方法。从本质上说，我们应该考虑采用 Reflect 来代替许多直接操作对象和属性值的方法，以提高代码的可维护性和可读性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/674aad7ba1ce0063549d23b4