JavaScript教程：深入理解Proxy和Reflect

JavaScript教程：深入理解Proxy和Reflect

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info

什么是Proxy？

Proxy（代理）是ES6引入的一个强大特性，它允许你创建一个对象的代理，从而可以拦截和自定义对象的基本操作。Proxy就像是一个中间人，包裹着目标对象，外界对目标对象的访问都要先经过这个中间人。

基本语法

let proxy = new Proxy(target, handler);

• target：被代理的目标对象，可以是任何类型的对象，包括数组、函数等
• handler：一个配置对象，包含各种"陷阱"（trap）方法，用于拦截对目标对象的操作

无陷阱的简单代理

当handler为空对象时，代理会透明地转发所有操作到目标对象：

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

proxy.test = 5;  // 操作会转发到target
console.log(target.test);  // 输出5
console.log(proxy.test);   // 输出5

Proxy的拦截能力

Proxy可以拦截JavaScript中几乎所有的对象基本操作。这些操作在ECMAScript规范中被称为"内部方法"，Proxy通过handler中的陷阱方法来拦截这些内部方法的调用。

常用陷阱方法

| 操作类型 | 陷阱方法 | 触发场景 | |---------|---------|---------| | 读取属性 | get | 访问对象属性 | | 设置属性 | set | 设置对象属性 | | 属性存在性检查 | has | in操作符 | | 删除属性 | deleteProperty | delete操作符 | | 函数调用 | apply | 函数调用 | | 构造函数调用 | construct | new操作符 | | 获取原型 | getPrototypeOf | Object.getPrototypeOf | | 设置原型 | setPrototypeOf | Object.setPrototypeOf | | 枚举属性 | ownKeys | Object.keys/values/entries等 |

实现默认值

我们可以利用get陷阱为不存在的属性提供默认值：

let numbers = [1, 2, 3];

numbers = new Proxy(numbers, {
  get(target, prop) {
    if (prop in target) {
      return target[prop];
    }
    return 0; // 默认值
  }
});

console.log(numbers[1]);  // 2
console.log(numbers[100]); // 0

数据验证

set陷阱可以用于验证设置的值：

let numbers = [];

numbers = new Proxy(numbers, {
  set(target, prop, value) {
    if (typeof value === 'number') {
      target[prop] = value;
      return true; // 必须返回true表示成功
    }
    return false; // 返回false会抛出TypeError
  }
});

numbers.push(1); // 成功
numbers.push("text"); // 抛出TypeError

高级应用场景

保护私有属性

按照约定，以下划线开头的属性被视为私有属性。我们可以用Proxy来强制实施这一约定：

let user = {
  name: "张三",
  _password: "secret"
};

user = new Proxy(user, {
  get(target, prop) {
    if (prop.startsWith('_')) {
      throw new Error("无权访问私有属性");
    }
    let value = target[prop];
    return typeof value === 'function' ? value.bind(target) : value;
  },
  set(target, prop, value) {
    if (prop.startsWith('_')) {
      throw new Error("无权修改私有属性");
    }
    target[prop] = value;
    return true;
  },
  // 类似地实现deleteProperty和ownKeys
});

console.log(user.name); // "张三"
console.log(user._password); // 抛出错误

属性枚举控制

通过ownKeys陷阱可以控制哪些属性会被枚举：

let user = {
  name: "李四",
  age: 30,
  _password: "***"
};

user = new Proxy(user, {
  ownKeys(target) {
    return Object.keys(target).filter(key => !key.startsWith('_'));
  }
});

for(let key in user) console.log(key); // 只输出name和age

Reflect API

Reflect是一个内置对象，它提供了拦截JavaScript操作的方法。这些方法与Proxy的陷阱方法一一对应。Reflect方法通常有以下特点：

1. 返回值更加合理（比如返回布尔值表示操作是否成功）
2. 函数式调用方式更加统一
3. 与Proxy陷阱方法完美对应

使用示例

let user = {};

Reflect.set(user, 'name', '王五');
console.log(Reflect.get(user, 'name')); // "王五"

实际应用建议

1. 性能考虑：Proxy会带来一定的性能开销，在性能关键路径上要谨慎使用
2. 透明性：确保代理行为对使用者透明，避免意外行为
3. 不可撤销代理：标准Proxy一旦创建就无法撤销，考虑使用场景
4. 兼容性：虽然现代浏览器都支持Proxy，但在旧环境中可能需要polyfill

Proxy和Reflect为JavaScript提供了强大的元编程能力，合理使用可以创建出更灵活、更安全的代码结构。

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info