JavaScript中的属性描述符与属性拦截：Object.defineProperty 与 Proxy 对比

描述
JavaScript 提供了两种方式来拦截对象属性的操作：Object.defineProperty 和 Proxy。两者都能监听属性的读取、赋值等行为，但设计目标、能力和应用场景有显著差异。理解它们的区别，能帮助我们在数据绑定、响应式系统、对象验证等场景中选择合适方案。

解题过程循序渐进讲解

步骤1：Object.defineProperty 的基本用法
Object.defineProperty 是 ES5 引入的，用于直接在一个对象上定义或修改一个属性的描述符。属性描述符分为两种：

• 数据描述符：包含 value、writable、enumerable、configurable。
• 存取描述符：包含 get、set、enumerable、configurable。

示例1：定义数据描述符

const obj = {};
Object.defineProperty(obj, 'name', {
  value: 'John',
  writable: false,      // 不可重写
  enumerable: true,     // 可枚举
  configurable: false   // 不可配置（不能删除，不能修改描述符）
});
console.log(obj.name); // 'John'
obj.name = 'Jane';    // 严格模式下报错，非严格模式静默失败
console.log(obj.name); // 仍为 'John'

示例2：定义存取描述符（实现拦截）

let _value = '';
Object.defineProperty(obj, 'data', {
  enumerable: true,
  configurable: true,
  get() {
    console.log('读取 data');
    return _value;
  },
  set(newVal) {
    console.log('设置 data 为', newVal);
    _value = newVal;
  }
});
obj.data = 'hello'; // 控制台输出：设置 data 为 hello
console.log(obj.data); // 控制台输出：读取 data → 输出 'hello'

这里通过 get/set 拦截了属性的读写，这是 Vue2 响应式系统的核心原理。

步骤2：Object.defineProperty 的局限性

1. 无法监听新增/删除属性：必须对每个属性单独调用 defineProperty，Vue2 中需用 Vue.set 解决。
2. 无法拦截数组索引直接设置：如 arr[0] = 1 不会被 set 捕获，Vue2 通过重写数组方法（push/pop 等）解决。
3. 性能开销：若对象属性多，需遍历每个属性进行定义。

步骤3：Proxy 的基本用法
Proxy 是 ES6 引入的，用于创建一个对象的代理，可以拦截目标对象的基本操作（如属性读写、删除、in 操作符等）。

示例：创建代理并拦截 get 和 set

const target = { name: 'John' };
const handler = {
  get(target, property, receiver) {
    console.log(`读取属性 ${property}`);
    return Reflect.get(...arguments);
  },
  set(target, property, value, receiver) {
    console.log(`设置属性 ${property} 为 ${value}`);
    return Reflect.set(...arguments);
  },
  deleteProperty(target, property) {
    console.log(`删除属性 ${property}`);
    return Reflect.deleteProperty(...arguments);
  }
};
const proxy = new Proxy(target, handler);

proxy.name;          // 控制台输出：读取属性 name
proxy.age = 20;      // 控制台输出：设置属性 age 为 20
delete proxy.name;   // 控制台输出：删除属性 name

Proxy 的 handler 可以定义多达 13 种陷阱（trap），覆盖对象的多数操作。

步骤4：Proxy 的优势

1. 拦截操作更全面：支持属性读取（get）、设置（set）、删除（deleteProperty）、in 操作符（has）、枚举（ownKeys）等。
2. 直接监听整个对象：无需遍历属性，对新添加属性自动生效。
3. 数组友好：可拦截数组索引赋值、length 修改等。
4. 更自然的反射式编程：通常配合 Reflect 方法实现默认行为。

示例：拦截数组操作

const array = [1, 2, 3];
const proxyArray = new Proxy(array, {
  set(target, property, value) {
    console.log(`设置数组[${property}] = ${value}`);
    target[property] = value;
    return true;
  }
});
proxyArray[0] = 9;    // 输出：设置数组[0] = 9
proxyArray.push(4);  // 会触发多次 set（包括 length 修改）

步骤5：Object.defineProperty 与 Proxy 对比表

步骤6：应用场景选择

• Vue2 响应式：采用 Object.defineProperty（兼容性考量）。
• Vue3 响应式：改用 Proxy，解决了数组和新增属性的监听问题。
• 对象验证/日志：Proxy 更简洁，例如自动记录属性访问。
• 不可变数据结构：结合 Proxy 拦截 set/delete 抛出错误。
• 兼容旧环境：使用 Object.defineProperty 或 polyfill。

步骤7：注意事项

1. Proxy 不会改变原始对象，操作代理对象才会触发陷阱。
2. Proxy 的 this 在陷阱内部可能指向 handler 对象，需注意传递。
3. Proxy 可撤销：通过 Proxy.revocable() 创建可取消的代理。
4. 性能敏感场景需测试：Proxy 的陷阱调用有额外开销。

总结
Object.defineProperty 是属性级别的拦截，适合细粒度控制单个属性；Proxy 是对象级别的拦截，功能更强大、更直观。在现代 JavaScript 开发中，优先考虑 Proxy，除非需要支持旧环境。掌握两者差异，能让你在实现数据绑定、代理模式、元编程时游刃有余。