JS `Proxy` 与 `Reflect`：元编程、拦截对象操作与响应式系统

各位观众老爷，晚上好！我是你们的老朋友，今天咱们来聊聊JavaScript里一对基情四射的好伙伴：Proxy 和 Reflect。它们就像武侠小说里的双剑合璧，能让你在 JavaScript 的世界里玩转元编程，拦截对象操作，甚至构建出响应式系统！

一、啥是元编程？为啥要搞它？

先别慌，元编程听起来高大上，其实就是“编写能够操作其他程序的程序”。简单来说，就是用代码来生成代码、修改代码，或者拦截代码的运行。

为啥要搞元编程？因为它能：

提高代码的灵活性和可扩展性： 比如，你可以在运行时动态地创建对象，或者修改对象的行为。
实现AOP（面向切面编程）： 你可以在不修改原有代码的情况下，添加一些额外的逻辑，比如日志记录、性能监控等。
构建更强大的框架和库： 很多流行的框架，比如 Vue.js，React，都使用了元编程技术。

二、Proxy：拦截一切，掌控全局

Proxy 就像一个门卫，站在对象的前面，拦截对该对象的所有操作。你可以定义各种“陷阱”（traps），来处理这些被拦截的操作。

1. Proxy 的基本用法

const target = {
  name: '张三',
  age: 30
};

const handler = {
  get: function(target, property, receiver) {
    console.log(`有人要读取 ${property} 属性了！`);
    return Reflect.get(target, property, receiver); // 必须使用 Reflect
  },
  set: function(target, property, value, receiver) {
    console.log(`有人要设置 ${property} 属性为 ${value} 了！`);
    Reflect.set(target, property, value, receiver); // 必须使用 Reflect
    return true; // 表示设置成功
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // 输出：有人要读取 name 属性了！ 张三
proxy.age = 35; // 输出：有人要设置 age 属性为 35 了！
console.log(target.age); // 输出：35

代码解释：

target：这是你要代理的原始对象。
handler：这是一个对象，包含了各种“陷阱”（traps），用来拦截对 target 的操作。
get(target, property, receiver)：这个陷阱会在读取属性时被触发。
- target：原始对象。
- property：要读取的属性名。
- receiver：proxy 对象本身（或者继承 proxy 的对象）。
set(target, property, value, receiver)：这个陷阱会在设置属性时被触发。
- target：原始对象。
- property：要设置的属性名。
- value：要设置的属性值。
- receiver：proxy 对象本身（或者继承 proxy 的对象）。

2. 常用的 Proxy 陷阱（Traps）

陷阱（Trap）	触发时机
`get(target, property, receiver)`	读取属性时
`set(target, property, value, receiver)`	设置属性时
`has(target, property)`	使用 `in` 操作符时，比如 `property in proxy`
`deleteProperty(target, property)`	使用 `delete` 操作符时，比如 `delete proxy.property`
`apply(target, thisArg, argumentsList)`	调用函数时（如果 `target` 是一个函数）
`construct(target, argumentsList, newTarget)`	使用 `new` 操作符时（如果 `target` 是一个构造函数）
`getPrototypeOf(target)`	使用 `Object.getPrototypeOf(proxy)` 时
`setPrototypeOf(target, prototype)`	使用 `Object.setPrototypeOf(proxy, prototype)` 时
`isExtensible(target)`	使用 `Object.isExtensible(proxy)` 时
`preventExtensions(target)`	使用 `Object.preventExtensions(proxy)` 时
`getOwnPropertyDescriptor(target, property)`	使用 `Object.getOwnPropertyDescriptor(proxy, property)` 时
`defineProperty(target, property, descriptor)`	使用 `Object.defineProperty(proxy, property, descriptor)` 时
`ownKeys(target)`	使用 `Object.getOwnPropertyNames(proxy)` 或 `Object.getOwnPropertySymbols(proxy)` 或 `Reflect.ownKeys(proxy)` 时

3. Proxy 的应用场景

数据验证： 可以在 set 陷阱中验证数据的合法性。

const target = {
  age: 0
};

const handler = {
  set: function(target, property, value, receiver) {
    if (property === 'age') {
      if (typeof value !== 'number' || value < 0 || value > 150) {
        throw new Error('年龄必须是 0 到 150 之间的数字！');
      }
    }
    Reflect.set(target, property, value, receiver);
    return true;
  }
};

const proxy = new Proxy(target, handler);

proxy.age = 25; // 正常
// proxy.age = -10; // 抛出错误：年龄必须是 0 到 150 之间的数字！

日志记录： 可以在 get 和 set 陷阱中记录属性的访问和修改。

const target = {
  name: '张三',
  age: 30
};

const handler = {
  get: function(target, property, receiver) {
    console.log(`[LOG] 正在读取 ${property} 属性`);
    return Reflect.get(target, property, receiver);
  },
  set: function(target, property, value, receiver) {
    console.log(`[LOG] 正在设置 ${property} 属性为 ${value}`);
    Reflect.set(target, property, value, receiver);
    return true;
  }
};

const proxy = new Proxy(target, handler);

proxy.name; // 输出：[LOG] 正在读取 name 属性
proxy.age = 35; // 输出：[LOG] 正在设置 age 属性为 35

实现响应式系统： 可以在 set 陷阱中触发更新视图的操作。

// 简易的响应式系统示例
const data = {
  name: '张三',
  age: 30
};

const handler = {
  set: function(target, property, value, receiver) {
    console.log(`数据 ${property} 发生了变化，需要更新视图！`);
    Reflect.set(target, property, value, receiver);
    updateView(); // 模拟更新视图
    return true;
  }
};

const proxy = new Proxy(data, handler);

function updateView() {
  console.log('视图已更新！');
}

proxy.age = 35; // 输出：数据 age 发生了变化，需要更新视图！ 视图已更新！

三、Reflect：对象操作的瑞士军刀

Reflect 是一个内置对象，提供了一组用于执行对象操作的方法。它的方法与 Proxy 的陷阱一一对应，而且行为更加规范和可靠。

1. Reflect 的基本用法

const obj = {
  name: '李四',
  age: 25
};

// 获取属性值
console.log(Reflect.get(obj, 'name')); // 输出：李四

// 设置属性值
Reflect.set(obj, 'age', 28);
console.log(obj.age); // 输出：28

// 检查对象是否拥有某个属性
console.log(Reflect.has(obj, 'name')); // 输出：true

// 删除属性
Reflect.deleteProperty(obj, 'age');
console.log(obj.age); // 输出：undefined

2. Reflect 的重要性

为 Proxy 提供默认行为： 在 Proxy 的陷阱中，通常需要调用 Reflect 对应的方法来执行默认的对象操作。如果不调用 Reflect，可能会导致一些奇怪的错误。
提供更可靠的对象操作： Reflect 的方法在执行失败时，会返回 false，而不是抛出错误。这使得代码更加健壮。
增强代码的可读性： 使用 Reflect 可以更清晰地表达对象操作的意图。

3. Reflect 的常用方法

Reflect 的方法和 Proxy 的陷阱一一对应，可以参考上面的表格。

四、Proxy + Reflect：黄金搭档，天下无敌

Proxy 负责拦截对象操作，Reflect 负责执行默认的对象操作。它们配合使用，可以实现各种强大的功能。

1. 拦截函数调用

const target = function(name) {
  console.log(`Hello, ${name}!`);
};

const handler = {
  apply: function(target, thisArg, argumentsList) {
    console.log('函数被调用了！');
    console.log('参数：', argumentsList);
    return Reflect.apply(target, thisArg, argumentsList);
  }
};

const proxy = new Proxy(target, handler);

proxy('王五'); // 输出：函数被调用了！ 参数： [ '王五' ] Hello, 王五!

2. 拦截构造函数

const target = function(name, age) {
  this.name = name;
  this.age = age;
};

const handler = {
  construct: function(target, argumentsList, newTarget) {
    console.log('构造函数被调用了！');
    console.log('参数：', argumentsList);
    return Reflect.construct(target, argumentsList, newTarget);
  }
};

const proxy = new Proxy(target, handler);

const obj = new proxy('赵六', 40); // 输出：构造函数被调用了！ 参数： [ '赵六', 40 ]
console.log(obj.name); // 输出：赵六
console.log(obj.age); // 输出：40

五、构建一个简单的响应式系统

让我们用 Proxy 和 Reflect 来构建一个更完整的响应式系统示例：

class Dep {
  constructor() {
    this.subscribers = new Set();
  }

  depend() {
    if (activeEffect) {
      this.subscribers.add(activeEffect);
    }
  }

  notify() {
    this.subscribers.forEach(effect => {
      effect();
    });
  }
}

let activeEffect = null;

function effect(fn) {
  activeEffect = fn;
  fn(); // 立即执行一次，以便收集依赖
  activeEffect = null;
}

const targetMap = new WeakMap();

function getDep(target, key) {
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }

  let dep = depsMap.get(key);
  if (!dep) {
    dep = new Dep();
    depsMap.set(key, dep);
  }
  return dep;
}

function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      const dep = getDep(target, key);
      dep.depend(); // 收集依赖
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      Reflect.set(target, key, value, receiver);
      const dep = getDep(target, key);
      dep.notify(); // 触发更新
      return true;
    }
  });
}

// 使用示例
const data = reactive({
  name: '钱七',
  age: 50
});

effect(() => {
  console.log(`姓名：${data.name}，年龄：${data.age}`); // 当 data.name 或 data.age 发生变化时，该函数会被重新执行
});

data.name = '孙八'; // 输出：姓名：孙八，年龄：50
data.age = 55; // 输出：姓名：孙八，年龄：55

代码解释：

Dep 类：用于存储依赖于某个属性的所有 effect 函数。
activeEffect 变量：用于记录当前正在执行的 effect 函数。
targetMap：一个 WeakMap，用于存储对象和属性之间的依赖关系。
getDep 函数：用于获取指定对象和属性的 Dep 对象。
reactive 函数：用于将一个普通对象转换为响应式对象。
effect 函数：用于创建一个副作用函数，当依赖的数据发生变化时，该函数会被重新执行。

六、注意事项

性能问题： Proxy 会拦截所有对象操作，可能会带来一定的性能损耗。因此，在性能敏感的场景下，需要谨慎使用。
兼容性问题： Proxy 是 ES6 的新特性，在一些老版本的浏览器中可能不支持。
循环引用： Proxy 的 handler 中如果直接访问 target 对象，可能会导致循环引用。应该使用 Reflect 来访问 target 对象。

七、总结

Proxy 和 Reflect 是 JavaScript 中非常强大的工具，它们可以让你在更高的层次上控制对象的行为，实现各种复杂的逻辑。掌握它们，你就可以玩转元编程，构建更强大的框架和库，成为一名真正的 JavaScript 大师！

好了，今天的讲座就到这里。谢谢大家！散会！

发表回复 取消回复

发表回复取消回复