壹.3.3 JavaScript元编程：Proxy与Reflect

01.什么是元编程

元编程（Metaprogramming）是指某类计算机程序的编写，这类计算机程序编写或者操纵其他程序（或者自身）作为它们的数据，或者在运行时完成部分本应在编译时完成的工作。很多情况下与手工编写全部代码相比，元编程的工作效率更高。

编写元程序的语言称之为元语言，被操作的语言称之为目标语言。

一门语言同时也是自身的元语言的能力称之为反射。

以上是百度百科的定义。

这么说的话，常见的eval是实实在在的元编程了。

let str = `(function hello(){
    console.log('hello');
})()`;
eval(str);//>> hello

如上代码，eval可以编写计算机程序从而动态生成一段程序，实现用程序造程序，这就是元编程。

而如果是程序具备自己造自己的能力，那么这门程序语言就具备反射的能力。上面的JavaScript就是自己造自己：通过输入一段JavaScript字符串，造出一段新的JavaScript函数，因此JavaScript具备反射的能力。

02.Proxy

Proxy是ES6引入的一个强大的元编程特性，它允许你拦截并自定义JavaScript对象的基本操作，比如属性查找、赋值、枚举、函数调用等。

基本语法

const proxy = new Proxy(target, handler);

• target：要代理的目标对象

• handler：处理器对象，包含"陷阱"（trap）方法

常用的陷阱方法

const handler = {
  // 拦截属性读取
  get(target, prop, receiver) {
    console.log(`正在读取属性: ${prop}`);
    return target[prop];
  },
  
  // 拦截属性设置
  set(target, prop, value, receiver) {
    console.log(`正在设置属性: ${prop} = ${value}`);
    target[prop] = value;
    return true; // 必须返回true表示设置成功
  },
  
  // 拦截属性删除
  deleteProperty(target, prop) {
    console.log(`正在删除属性: ${prop}`);
    return delete target[prop];
  },
  
  // 拦截函数调用
  apply(target, thisArg, argumentsList) {
    console.log('正在调用函数');
    return target.apply(thisArg, argumentsList);
  }
};

实际应用示例

1. 数据验证

const user = {
  name: '张三',
  age: 25
};

const userProxy = new Proxy(user, {
  set(target, prop, value) {
    if (prop === 'age' && (typeof value !== 'number' || value < 0)) {
      throw new Error('年龄必须是正数');
    }
    target[prop] = value;
    return true;
  }
});

userProxy.age = 30; // 正常
// userProxy.age = -5; // 抛出错误

2. 默认值处理

const handler = {
  get(target, prop) {
    if (prop in target) {
      return target[prop];
    }
    return `属性 ${prop} 不存在`;
  }
};

const obj = { name: '李四' };
const proxy = new Proxy(obj, handler);

console.log(proxy.name); // 李四
console.log(proxy.age); // 属性 age 不存在

03.Reflect

Reflect是ES6引入的一个新的全局对象，它提供了拦截JavaScript操作的方法。这些方法与Proxy的陷阱方法一一对应，让Proxy能够更方便地调用默认行为。

Reflect的主要方法

// 获取属性值
Reflect.get(target, propertyKey[, receiver])

// 设置属性值
Reflect.set(target, propertyKey, value[, receiver])

// 删除属性
Reflect.deleteProperty(target, propertyKey)

// 检查属性是否存在
Reflect.has(target, propertyKey)

// 获取对象的所有属性
Reflect.ownKeys(target)

// 创建对象实例
Reflect.construct(target, argumentsList[, newTarget])

// 调用函数
Reflect.apply(target, thisArgument, argumentsList)

与Proxy结合使用

const user = {
  name: '王五',
  age: 28
};

const userProxy = new Proxy(user, {
  get(target, prop, receiver) {
    console.log(`读取属性: ${prop}`);
    // 使用Reflect调用默认行为
    return Reflect.get(target, prop, receiver);
  },
  
  set(target, prop, value, receiver) {
    console.log(`设置属性: ${prop} = ${value}`);
    // 使用Reflect调用默认行为
    return Reflect.set(target, prop, value, receiver);
  }
});

userProxy.name; // 读取属性: name
userProxy.age = 30; // 设置属性: age = 30

Reflect的优势

1. 函数式编程：所有操作都是函数调用，而不是操作符

2. 更好的错误处理：操作失败时返回false而不是抛出异常

3. 与Proxy配合：可以轻松调用默认行为

4. 更可靠的apply：比Function.prototype.apply更可靠

04.实际应用场景

1. 数据绑定和响应式

function createReactive(obj) {
  return new Proxy(obj, {
    get(target, prop) {
      console.log(`读取了 ${prop}`);
      return target[prop];
    },
    set(target, prop, value) {
      console.log(`${prop} 从 ${target[prop]} 变为 ${value}`);
      target[prop] = value;
      // 这里可以触发视图更新
      return true;
    }
  });
}

const data = createReactive({ count: 0 });
data.count; // 读取了 count
data.count = 1; // count 从 0 变为 1

2. 日志记录

function createLoggingProxy(obj) {
  return new Proxy(obj, {
    get(target, prop) {
      console.log(`[GET] ${prop}`);
      return target[prop];
    },
    set(target, prop, value) {
      console.log(`[SET] ${prop} = ${value}`);
      return Reflect.set(target, prop, value);
    }
  });
}

3. 权限控制

function createSecureProxy(obj, allowedProps) {
  return new Proxy(obj, {
    get(target, prop) {
      if (allowedProps.includes(prop)) {
        return target[prop];
      }
      throw new Error(`无权访问属性: ${prop}`);
    }
  });
}

05.注意事项

1. 性能影响：Proxy会带来一定的性能开销，在性能敏感的场景下要谨慎使用

2. 浏览器兼容性：Proxy是ES6特性，需要现代浏览器支持

3. 调试困难：Proxy的拦截行为可能让调试变得复杂

4. 不可撤销：Proxy一旦创建就无法撤销，只能创建新的代理对象

06.结语

Proxy和Reflect为JavaScript提供了强大的元编程能力，让开发者能够拦截和自定义对象的基本操作。它们在数据绑定、验证、日志记录、权限控制等场景下非常有用。但也要注意合理使用，避免过度复杂化代码。