JavaScript中的Proxy与Reflect API详解

在JavaScript中，Proxy和Reflect是ES6引入的两个强大的元编程特性，它们允许开发者在语言级别上拦截和定义对象的基本操作行为。Proxy用于创建一个对象的代理，可以拦截并重新定义该对象的基本操作（如属性查找、赋值、枚举、函数调用等），而Reflect则提供了一系列与Proxy处理器方法相对应的静态方法，用于更优雅地实现默认行为。

1. 代理（Proxy）的基本概念

Proxy对象用于包装另一个对象（称为目标对象），并拦截对该目标对象的操作。创建一个Proxy需要两个参数：

• target：要代理的目标对象
• handler：一个包含"陷阱"（trap）方法的对象，用于定义拦截行为

基本语法：new Proxy(target, handler)

const target = { name: "John", age: 30 };
const handler = {
  get(target, property) {
    return property in target ? target[property] : "Not found";
  }
};
const proxy = new Proxy(target, handler);

console.log(proxy.name); // "John"
console.log(proxy.gender); // "Not found"

2. 处理器（Handler）的主要陷阱方法

处理器对象可以包含多种陷阱方法，每个方法对应一种基本操作：

2.1 get() - 拦截属性读取

const handler = {
  get(target, property, receiver) {
    console.log(`Reading property "${property}"`);
    // 使用Reflect实现默认行为
    return Reflect.get(target, property, receiver);
  }
};

2.2 set() - 拦截属性赋值

const handler = {
  set(target, property, value, receiver) {
    if (property === 'age' && typeof value !== 'number') {
      throw new TypeError('Age must be a number');
    }
    console.log(`Setting ${property} to ${value}`);
    return Reflect.set(target, property, value, receiver);
  }
};

2.3 has() - 拦截in操作符

const handler = {
  has(target, property) {
    console.log(`Checking if property "${property}" exists`);
    return Reflect.has(target, property);
  }
};

2.4 deleteProperty() - 拦截delete操作符

const handler = {
  deleteProperty(target, property) {
    if (property.startsWith('_')) {
      throw new Error(`Cannot delete private property "${property}"`);
    }
    return Reflect.deleteProperty(target, property);
  }
};

2.5 ownKeys() - 拦截Object.keys()等操作

const handler = {
  ownKeys(target) {
    // 过滤掉以下划线开头的属性
    return Reflect.ownKeys(target)
      .filter(key => !key.startsWith('_'));
  }
};

2.6 construct() - 拦截new操作符

const handler = {
  construct(Target, args, newTarget) {
    console.log(`Constructing with arguments: ${args}`);
    return new Target(...args);
  }
};

2.7 apply() - 拦截函数调用

const handler = {
  apply(target, thisArg, argumentsList) {
    console.log(`Function called with arguments: ${argumentsList}`);
    return target.apply(thisArg, argumentsList);
  }
};

3. Reflect API详解

Reflect对象提供了与Proxy处理器方法一一对应的静态方法，这些方法与对象的内部方法完全对应。使用Reflect而不是直接操作对象有以下优势：

3.1 统一的API设计

// 传统方式
let obj = { x: 1, y: 2 };

// 设置属性
obj.z = 3;

// 删除属性
delete obj.x;

// 判断属性存在
'x' in obj;

// 使用Reflect
Reflect.set(obj, 'z', 3);
Reflect.deleteProperty(obj, 'x');
Reflect.has(obj, 'x');

3.2 更合理的返回值设计

// Object.defineProperty在失败时抛出错误
try {
  Object.defineProperty(obj, 'readonly', {
    value: 1,
    writable: false
  });
} catch (e) {
  console.error(e);
}

// Reflect.defineProperty返回布尔值
const success = Reflect.defineProperty(obj, 'readonly', {
  value: 1,
  writable: false
});
if (!success) {
  console.log('Failed to define property');
}

3.3 简化Proxy处理器实现

const handler = {
  get(target, property, receiver) {
    // 不使用Reflect的冗长写法
    // return target[property];
    
    // 使用Reflect，正确处理receiver（对于继承很重要）
    return Reflect.get(target, property, receiver);
  }
};

4. Proxy的高级应用模式

4.1 验证代理

const validator = {
  set(target, property, value) {
    if (property === 'age') {
      if (typeof value !== 'number') {
        throw new TypeError('Age must be a number');
      }
      if (value < 0 || value > 150) {
        throw new RangeError('Age must be between 0 and 150');
      }
    }
    return Reflect.set(target, property, value);
  }
};

const person = new Proxy({}, validator);
person.age = 25; // 成功
person.age = -5; // 抛出RangeError

4.2 观察者模式实现

function createObservable(target, onChange) {
  return new Proxy(target, {
    set(target, property, value, receiver) {
      const oldValue = target[property];
      const result = Reflect.set(target, property, value, receiver);
      if (result && oldValue !== value) {
        onChange(property, oldValue, value);
      }
      return result;
    }
  });
}

const observed = createObservable({ count: 0 }, (prop, oldVal, newVal) => {
  console.log(`${prop} changed from ${oldVal} to ${newVal}`);
});

observed.count = 1; // 输出: count changed from 0 to 1

4.3 负索引数组支持

function createNegativeArray(array) {
  return new Proxy(array, {
    get(target, index, receiver) {
      const idx = parseInt(index);
      if (index < 0) {
        index = target.length + idx;
      }
      return Reflect.get(target, index, receiver);
    }
  });
}

const arr = createNegativeArray(['a', 'b', 'c', 'd']);
console.log(arr[-1]); // 'd'
console.log(arr[-2]); // 'c'

4.4 自动绑定this

function autoBind(obj) {
  return new Proxy(obj, {
    get(target, property, receiver) {
      const value = Reflect.get(target, property, receiver);
      if (typeof value === 'function') {
        return value.bind(target);
      }
      return value;
    }
  });
}

const obj = autoBind({
  name: 'Test',
  greet() {
    console.log(`Hello, ${this.name}`);
  }
});

const greet = obj.greet;
greet(); // Hello, Test (this仍然正确绑定)

5. Proxy的限制和注意事项

5.1 不可代理原始值

// 错误：Proxy只能代理对象
// const proxy = new Proxy(42, {});

// 正确做法
const proxy = new Proxy(new Number(42), {});

5.2 代理透明性限制

const target = {};
const proxy = new Proxy(target, {});

console.log(proxy === target); // false
console.log(Object.getPrototypeOf(proxy) === Object.getPrototypeOf(target)); // true

5.3 可撤销代理

const target = { message: 'hello' };
const { proxy, revoke } = Proxy.revocable(target, {});

console.log(proxy.message); // 'hello'
revoke(); // 撤销代理
console.log(proxy.message); // TypeError: Cannot perform 'get' on a revoked proxy

5.4 性能考虑
由于Proxy的拦截操作，它比直接对象操作慢。在性能敏感的代码中应谨慎使用。

6. Reflect的完整方法列表

Reflect提供了13个静态方法，对应所有可被代理的操作：

1. Reflect.apply(target, thisArgument, argumentsList)
2. Reflect.construct(target, argumentsList, newTarget)
3. Reflect.defineProperty(target, propertyKey, attributes)
4. Reflect.deleteProperty(target, propertyKey)
5. Reflect.get(target, propertyKey, receiver)
6. Reflect.getOwnPropertyDescriptor(target, propertyKey)
7. Reflect.getPrototypeOf(target)
8. Reflect.has(target, propertyKey)
9. Reflect.isExtensible(target)
10. Reflect.ownKeys(target)
11. Reflect.preventExtensions(target)
12. Reflect.set(target, propertyKey, value, receiver)
13. Reflect.setPrototypeOf(target, prototype)

总结

Proxy和Reflect是JavaScript元编程的强大工具，它们允许开发者：

1. 创建可拦截基本操作的代理对象
2. 实现数据验证、观察者模式、自动绑定等高级功能
3. 通过Reflect的标准化API更优雅地操作对象
4. 构建更具表达力和灵活性的抽象

虽然Proxy提供了强大的功能，但在使用时需要考虑性能影响和浏览器兼容性。正确使用这两个API可以极大地提升代码的灵活性和可维护性。