JS `Reflect` API：与 `Proxy` 配合进行元编程操作

各位观众老爷们，大家好！今天咱们来聊聊 JavaScript 里一对儿好基友：Reflect 和 Proxy。它们俩凑一块儿，能让我们在 JavaScript 里玩出不少花样，干些“元编程”的勾当。

啥是元编程？简单来说，就是编写可以操作其他代码的代码。听起来有点绕，但想想看，咱们经常用的 Babel，不就是把 ESNext 的代码转换成 ES5 的代码吗？这就是一种元编程。

Proxy 呢，就像一个“代理人”，它拦截对一个对象的各种操作，然后让你有机会在这些操作发生之前、之后或者干脆就阻止它们。而 Reflect，则是 Proxy 的好帮手，它提供了一组方法，让我们可以以更标准、更安全的方式来执行这些被拦截的操作。

好，废话不多说，咱们直接上代码，看看它们俩是怎么配合的。

1. Proxy 的基本用法

先来个最简单的 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}`);
    return Reflect.set(target, property, value, receiver); // 必须用 Reflect
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name);
proxy.age = 35;

这段代码创建了一个 target 对象，然后用 Proxy 对它进行代理。handler 对象定义了两个拦截器：get 和 set。

get 拦截器会在你访问 proxy 的属性时被调用。
set 拦截器会在你设置 proxy 的属性时被调用。

注意，在 get 和 set 拦截器里，我们都使用了 Reflect.get 和 Reflect.set。这是非常重要的！ 如果你不用 Reflect，而是直接用 target[property] 或者 target[property] = value，可能会导致一些奇怪的问题，甚至死循环。

为什么必须用 Reflect？

Reflect 提供了一种更“正统”的方式来操作对象。它解决了以下几个问题：

this 指向问题： 在某些情况下，target[property] 可能会改变 this 的指向，导致意想不到的结果。Reflect 会保持 this 的指向不变。
错误处理： target[property] = value 在设置属性失败时，通常会默默地失败，不会抛出错误。而 Reflect.set 在设置属性失败时，会返回 false，让你有机会进行错误处理。
更清晰的语义： Reflect 的方法名更加明确，例如 Reflect.get、Reflect.set、Reflect.apply 等，更容易理解代码的意图。

2. Reflect 的方法

Reflect 对象提供了以下方法，每个方法都对应着 JavaScript 中的一种操作：

Reflect 方法	对应操作	说明
`Reflect.apply(target, thisArg, argumentsList)`	`Function.prototype.apply`	调用一个函数。
`Reflect.construct(target, argumentsList, newTarget)`	`new target(...args)`	使用 `new` 运算符调用构造函数。
`Reflect.defineProperty(target, propertyKey, attributes)`	`Object.defineProperty`	定义或修改对象的属性。
`Reflect.deleteProperty(target, propertyKey)`	`delete target[propertyKey]`	删除对象的属性。
`Reflect.get(target, propertyKey, receiver)`	`target[propertyKey]`	获取对象的属性值。`receiver` 是 `this` 指向的对象，通常是 `proxy` 对象本身。
`Reflect.getOwnPropertyDescriptor(target, propertyKey)`	`Object.getOwnPropertyDescriptor`	获取对象自身属性的描述符。
`Reflect.getPrototypeOf(target)`	`Object.getPrototypeOf`	获取对象的原型。
`Reflect.has(target, propertyKey)`	`propertyKey in target`	检查对象是否拥有某个属性。
`Reflect.isExtensible(target)`	`Object.isExtensible`	检查对象是否可扩展。
`Reflect.ownKeys(target)`	`Object.getOwnPropertyNames` 和 `Object.getOwnPropertySymbols`	获取对象自身的所有属性键名（包括字符串键名和 Symbol 键名）。
`Reflect.preventExtensions(target)`	`Object.preventExtensions`	阻止对象扩展。
`Reflect.set(target, propertyKey, value, receiver)`	`target[propertyKey] = value`	设置对象的属性值。`receiver` 是 `this` 指向的对象，通常是 `proxy` 对象本身。
`Reflect.setPrototypeOf(target, prototype)`	`Object.setPrototypeOf`	设置对象的原型。

3. Proxy 的各种拦截器

除了 get 和 set 之外，Proxy 还提供了很多其他的拦截器，可以拦截各种各样的操作。

apply(target, thisArg, argumentsList): 拦截函数调用。
construct(target, argumentsList, newTarget): 拦截 new 操作符。
defineProperty(target, propertyKey, attributes): 拦截 Object.defineProperty。
deleteProperty(target, propertyKey): 拦截 delete 操作符。
getOwnPropertyDescriptor(target, propertyKey): 拦截 Object.getOwnPropertyDescriptor。
getPrototypeOf(target): 拦截 Object.getPrototypeOf。
has(target, propertyKey): 拦截 in 操作符。
isExtensible(target): 拦截 Object.isExtensible。
ownKeys(target): 拦截 Object.keys 和 Object.getOwnPropertySymbols。
preventExtensions(target): 拦截 Object.preventExtensions。
setPrototypeOf(target, prototype): 拦截 Object.setPrototypeOf。

咱们来几个例子，看看这些拦截器怎么用。

3.1 拦截函数调用 (apply)

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

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

const proxy = new Proxy(target, handler);

proxy('李四'); // 输出：函数被调用了！ Hello, 李四!

3.2 拦截 new 操作符 (construct)

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

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

const proxy = new Proxy(target, handler);

const instance = new proxy('王五'); // 输出：构造函数被调用了！
console.log(instance.name); // 输出：王五

3.3 拦截 delete 操作符 (deleteProperty)

const target = {
  name: '赵六',
  age: 40
};

const handler = {
  deleteProperty: function(target, propertyKey) {
    console.log(`正在删除属性：${propertyKey}`);
    return Reflect.deleteProperty(target, propertyKey);
  }
};

const proxy = new Proxy(target, handler);

delete proxy.age; // 输出：正在删除属性：age
console.log(target.age); // 输出：undefined

4. Proxy 和 Reflect 的应用场景

Proxy 和 Reflect 可以用于很多场景，例如：

数据验证： 在 set 拦截器里，可以对设置的值进行验证，确保数据的有效性。
日志记录： 可以记录对对象的所有操作，方便调试和分析。
权限控制： 可以控制对对象的访问权限，例如只允许某些用户访问某些属性。
数据绑定： 可以实现数据的双向绑定，当数据发生变化时，自动更新视图。
模拟私有变量： 虽然 JavaScript 没有真正的私有变量，但可以用 Proxy 来模拟。
AOP（面向切面编程）： 可以在不修改原有代码的情况下，对对象进行增强。

5. 模拟私有变量

这是一个比较有趣的应用场景。JavaScript 没有真正的私有变量，通常用 _ 开头的属性来表示私有变量，但这只是一种约定，并不能阻止外部访问。

我们可以用 Proxy 来模拟私有变量，让外部无法直接访问。

const createSecretHolder = (secret) => {
  let internalSecret = secret;

  const publicMethods = {
    getSecret: () => {
      console.log("I can access internalSecret:", internalSecret); //能访问到
      return internalSecret;
    },
    setSecret: (newSecret) => {
      internalSecret = newSecret;
    },
  };

  const proxy = new Proxy(publicMethods, {
    get(target, key) {
      if (key === 'getSecret' || key === 'setSecret') {
        return target[key];
      } else {
        return undefined; // 禁止访问其他属性
      }
    },
    set(target, key, value) {
      return false; // 禁止设置任何属性
    }
  });

  return proxy;
};

const obj = createSecretHolder('my secret');

console.log(obj.getSecret()); // 输出: I can access internalSecret: my secret  my secret
obj.setSecret("new secret");
console.log(obj.getSecret()); // 输出: I can access internalSecret: new secret new secret

console.log(obj.internalSecret); // 输出: undefined (外部无法访问)
obj.internalSecret = "try to change"; //设置失败
console.log(obj.getSecret()); // 输出: I can access internalSecret: new secret new secret

在这个例子中，internalSecret 变量存储了私有数据。Proxy 拦截了对 obj 的所有属性访问，只允许访问 getSecret 和 setSecret 方法，禁止访问其他属性，从而实现了私有变量的效果。

6. AOP（面向切面编程）

AOP 是一种编程思想，它允许你在不修改原有代码的情况下，对代码进行增强。例如，你可以在函数执行前后添加日志，或者在函数抛出异常时进行处理。

Proxy 可以很好地实现 AOP。

const log = (target, name, descriptor) => {
  const original = descriptor.value;

  if (typeof original === 'function') {
    descriptor.value = function(...args) {
      console.log(`Calling ${name} with arguments: ${args}`);
      try {
        const result = original.apply(this, args);
        console.log(`Result of ${name}: ${result}`);
        return result;
      } catch (e) {
        console.error(`Error in ${name}: ${e}`);
        throw e;
      }
    };
  }

  return descriptor;
};

class Calculator {
  @log
  add(a, b) {
    return a + b;
  }

  @log
  subtract(a, b) {
    return a - b;
  }
}

const calculator = new Calculator();
calculator.add(2, 3);
calculator.subtract(5, 2);

在这个例子中，log 函数是一个装饰器，它可以对函数进行增强，在函数执行前后添加日志。@log 语法糖是 TypeScript 的语法，但在 JavaScript 中可以用 Object.defineProperty 来实现类似的效果。

7. 注意事项

Proxy 的性能开销比直接访问对象要大，所以不要过度使用。
Proxy 只能拦截对 proxy 对象的操作，不能拦截对 target 对象的操作。
Proxy 和 Reflect 是 ES6 的新特性，在一些老版本的浏览器中可能不支持。
使用Reflect的时候，注意各个方法的thisArg和argumentsList参数的含义，要根据实际情况进行传递。

总结

Proxy 和 Reflect 是一对强大的工具，它们可以让我们在 JavaScript 里玩出很多花样。掌握它们，可以让你写出更灵活、更可维护的代码。但是，也要注意不要过度使用，以免影响性能。

好了，今天的讲座就到这里。希望大家有所收获！有问题可以随时提问。下次再见！

发表回复 取消回复

发表回复取消回复