前端 JavaScript 进阶面试题, JavaScript 中的 Proxy 与 Reflect 分别是什么?两者有什么关系?

Step 1

Q:: JavaScript 中的 Proxy 是什么？

A:: Proxy 是 ES6 引入的一种用于定义基本操作（如属性查找、赋值、枚举、函数调用等）的自定义行为的对象。它能够拦截并重新定义这些操作，使开发者可以在不直接修改目标对象的前提下，对其行为进行调整。

Step 2

Q:: JavaScript 中的 Reflect 是什么？

A:: Reflect 是 ES6 引入的一个内置对象，提供了与 Proxy 对象中的方法相对应的静态方法。它的出现是为了与 Proxy 共同作用，使得操作对象的行为变得更加规范和可预测。Reflect 提供的方法与原始操作的语义保持一致，并返回一个布尔值表示操作是否成功。

Step 3

Q:: Proxy 与 Reflect 之间有什么关系？

A:: Proxy 和 Reflect 是相辅相成的。Proxy 用于拦截对象的操作，Reflect 提供了与 Proxy 中捕获器方法对应的默认实现，方便开发者在自定义行为中调用原始行为。通过这种设计，开发者可以在 Proxy 捕获器中轻松地使用 Reflect 来实现默认行为，或者在必要时对其进行扩展或修改。

Step 4

Q:: 如何使用 Proxy 创建一个对象代理？

A:: 可以通过 new Proxy(target, handler) 语法创建一个 Proxy 对象。target 是被代理的对象，handler 是定义拦截行为的对象。以下是一个示例代码：

 
const target = {};
const handler = {
  get: function(obj, prop) {
    return prop in obj ? obj[prop] : 37;
  }
};
const proxy = new Proxy(target, handler);
console.log(proxy.a); // 37
 

Step 5

Q:: Reflect 的一些常见方法有哪些？

A:: Reflect 提供了多种方法，其中一些常见的包括： - Reflect.get(target, propertyKey, receiver)：与 target[propertyKey] 类似。 - Reflect.set(target, propertyKey, value, receiver)：与 target[propertyKey] = value 类似。 - Reflect.has(target, propertyKey)：与 propertyKey in target 类似。 - Reflect.deleteProperty(target, propertyKey)：与 delete target[propertyKey] 类似。 - Reflect.ownKeys(target)：返回一个数组，包含目标对象的所有自身属性（包括不可枚举和符号属性）。