走进代理和反射，掀开JS的「黑箱」运作

2023-10-05 17:38:56

走进代理的世界

代理，顾名思义，就是充当对象（目标对象）的代表，当我们对代理执行操作时，实际上是将操作委托给了目标对象。这种间接的操作方式可以让我们在不修改目标对象自身的情况下，对它进行扩展和控制。

初识代理：简单使用 Proxy

// 目标对象
const person = { name: 'John', age: 30 };

// 创建代理
const proxy = new Proxy(person, {
  // 拦截属性读取操作
  get: function(target, prop) {
    console.log(`读取属性：${prop}`);
    return Reflect.get(target, prop);
  },

  // 拦截属性赋值操作
  set: function(target, prop, value) {
    console.log(`设置属性：${prop}，值为：${value}`);
    return Reflect.set(target, prop, value);
  }
});

// 使用代理对象
console.log(proxy.name); // 读取属性：name
proxy.age = 31; // 设置属性：age，值为：31

走进反射的殿堂

反射，顾名思义，就是「对程序进行程序化」，它可以让我们在运行时检查和修改代码的行为。换句话说，反射让我们可以「内省」代码。

初识反射：简单的 Reflect 操作

// 目标对象
const person = { name: 'John', age: 30 };

// 使用 Reflect 获取属性值
const name = Reflect.get(person, 'name');

// 使用 Reflect 设置属性值
Reflect.set(person, 'age', 31);

// 使用 Reflect 调用方法
const greeting = Reflect.apply(person.greet, person, ['Hello!']);