前言

在 JavaScript 中，Reflect 是一个内置对象，提供了拦截和操作 JavaScript 对象的元方法。它是 ES6 (ES2015) 引入的特性，主要用于简化元编程（meta-programming）并与 Proxy 结合使用实现对对象属性更细粒度的操作控制。

代理对象

Proxy 的第一个参数为要进行代理的目标对象，类型为Object，如果我们代理的目标是一个基础数据类型那应该怎么实现呢？

基础数据类型的代理

在 JavaScript 中，基础数据类型（如 number、string、boolean 等）无法直接被 Proxy 代理，因为 Proxy 只能拦截对象（包括数组、函数、类等）的操作。但可以通过对象封装的方式间接代理基础类型：

const target  = {
    value: '123' // 这里可以是number 、string、boolean...
}
const proxy = new Proxy(target, {
    get (target, key, receiver){
        // receiver 指向 proxy实例
        // 思考 ？ 此处可否直接返回 target[key]
         return Reflect.get(target, key, receiver)
    },
    set (target, key, value, receiver){
        return Reflect.set(target, key, value, receiver)
    }
})

上述代码中有一个疑问，能否通过return target[key] 取代 return Reflect.get(target, key, receiver)? 事实上这里target[key] 等价于 Reflect.get(target, key), receiver是指向代理的实例，相当于call/apply的第一个参数，用于指定函数执行的上下文,上面例子中如果不涉及this指向，仅仅是对于简单类型的代理可使用Reflect.get(target, key) 或 target[key]（但不推荐），接下来我们看下面这个例子说明不推荐的原因：

复杂数据类型的代理

const people  = {
    get name(){
        console.log('thisArg:', this)
        return this._name;
    },
    _name:'xixi'
 }
 
 const proxy1 = new Proxy(people, {
     get (target, key, receiver){
      // 思考 ？ 此处可否直接返回 target[key]
      console.log('get name:', target, receiver)
      return Reflect.get(target, key, receiver);
     },
     
 })
 console.log(proxy1.name)
 // 输出：
 // get name: { name: [Getter], _name: 'xixi' } name { name: [Getter], _name: 'xixi' }
 // thisArg: { name: [Getter], _name: 'xixi' }
 // get name: { name: [Getter], _name: 'xixi' } _name { name: [Getter], _name: 'xixi' }
 // xixi
 
 const proxy2 = new Proxy(people, {
     get (target, key, receiver){
      // 思考 ？ 此处可否直接返回 target[key]
      console.log('get name:', target, receiver)
      return target[key];
     },
 })
 console.log(proxy2.name)
 // 输出：
 // get name: { name: [Getter], _name: 'xixi' } name { name: [Getter], _name: 'xixi' }
 // thisArg: { name: [Getter], _name: 'xixi' }
 // xixi

结论：通过对比输出结果，可以看出直接return target[key]会导致this无法绑定在代理对象上，当修改属性时代理事件就无法触发导致错误，所以建议直接按照Reflect.get(target, key, receiver)处理。

响应式编程

此处我们以vue3的响应式编程为例，自定义实现ref和reactive的简化版:

// 存储依赖关系的 WeakMap
const targetMap = new WeakMap();

// 当前正在收集依赖的副作用函数
let activeEffect = null;

// 副作用函数
function effect(fn) {
  activeEffect = fn;
  fn(); // 执行副作用，触发依赖收集
  activeEffect = null; // 清空
}

// 依赖收集函数
function track(target, key) {
  if (activeEffect) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      targetMap.set(target, (depsMap = new Map()));
    }
    
    let dep = depsMap.get(key);
    if (!dep) {
      depsMap.set(key, (dep = new Set()));
    }
    
    dep.add(activeEffect); // 将副作用添加到依赖集合
  }
}

// 触发依赖更新
function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  
  const dep = depsMap.get(key);
  if (dep) {
    dep.forEach(effect => effect()); // 执行所有依赖副作用
  }
}

// 简化版 reactive
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver);
      track(target, key); // 收集依赖
      return result;
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        trigger(target, key); // 触发更新
      }
      return result;
    }
  });
}

// 简化版 ref
function ref(initialValue) {
  const _value = { value: initialValue }; // 创建一个包裹对象
  
  // 对于对象类型，使用 reactive 转换为响应式
  if (typeof initialValue === 'object' && initialValue !== null) {
    _value.value = reactive(initialValue);
  }
  
  return new Proxy(_value, {
    get(target, key) {
      track(target, key); // 收集依赖
      return target[key];
    },
    set(target, key, value) {
      // 对于对象类型，使用 reactive 转换
      if (key === 'value' && typeof value === 'object' && value !== null) {
        target[key] = reactive(value);
      } else {
        target[key] = value;
      }
      trigger(target, key); // 触发更新
      return true;
    }
  });
}