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

1. 背景知识：什么是属性描述符？

JavaScript 对象中的每个属性都有一个关联的属性描述符（Property Descriptor），它是一个对象，用于定义该属性的行为特性。属性描述符分为两类：

• 数据描述符：包含 value 和 writable 等键，用于定义数据的值及其可写性。
• 存取描述符：包含 get 和 set 键，用于定义属性的获取和设置行为。

可以通过 Object.getOwnPropertyDescriptor() 获取某个属性的描述符，通过 Object.defineProperty() 定义或修改属性的描述符。

2. Object.defineProperty 的原理与用法

Object.defineProperty 用于在对象上定义一个新属性，或修改现有属性，并返回该对象。

步骤 1：定义数据描述符

const obj = {};
Object.defineProperty(obj, 'name', {
  value: 'Alice',       // 属性的值
  writable: true,       // 是否可修改
  enumerable: true,     // 是否可枚举（例如出现在 for...in 循环中）
  configurable: true    // 是否可删除或修改描述符
});
console.log(obj.name); // 输出: Alice

步骤 2：定义存取描述符

let _age = 20;
Object.defineProperty(obj, 'age', {
  get() {
    return _age;
  },
  set(newVal) {
    if (newVal < 0) {
      throw new Error('年龄不能为负数');
    }
    _age = newVal;
  },
  enumerable: true,
  configurable: false
});
console.log(obj.age); // 输出: 20
obj.age = 25;         // 通过 setter 修改

步骤 3：行为控制

• 如果 configurable 为 false，则不能删除该属性，也不能将其从数据描述符改为存取描述符（反之亦然），但可以修改 writable 从 true 到 false。
• 如果 writable 为 false，则尝试修改属性值会静默失败（严格模式下会报错）。

3. Proxy 的原理与用法

Proxy 是 ES6 引入的元编程特性，它允许你创建一个代理对象，用于拦截和自定义目标对象的基本操作。

步骤 1：创建代理

const target = { name: 'Bob' };
const handler = {
  get(target, property, receiver) {
    console.log(`读取属性 ${property}`);
    return target[property];
  },
  set(target, property, value, receiver) {
    console.log(`设置属性 ${property} 为 ${value}`);
    target[property] = value;
    return true; // 表示设置成功
  }
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // 输出: 读取属性 name -> Bob
proxy.age = 30;          // 输出: 设置属性 age 为 30

步骤 2：拦截多种操作

Proxy 可以拦截多达 13 种操作，如：

• get / set
• has（拦截 in 操作符）
• deleteProperty（拦截 delete 操作）
• apply（拦截函数调用）
• 等等。

例如，拦截 in 操作：

const handler = {
  has(target, property) {
    console.log(`检查属性 ${property} 是否存在`);
    return property in target;
  }
};
const proxy = new Proxy(target, handler);
console.log('name' in proxy); // 输出: 检查属性 name 是否存在 -> true

4. Object.defineProperty 与 Proxy 的详细对比

5. 示例对比：实现数据响应式

使用 Object.defineProperty

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() { return val; },
    set(newVal) {
      console.log(`${key} 从 ${val} 变为 ${newVal}`);
      val = newVal;
    }
  });
}
const data = {};
defineReactive(data, 'msg', 'hello');
data.msg = 'world'; // 输出: msg 从 hello 变为 world

缺点：需为每个属性单独定义，新增属性需重新调用，无法检测数组索引变化。

使用 Proxy

const reactive = (obj) => {
  return new Proxy(obj, {
    get(target, key) {
      console.log(`读取 ${key}`);
      return target[key];
    },
    set(target, key, value) {
      console.log(`设置 ${key} 为 ${value}`);
      target[key] = value;
      return true;
    }
  });
};
const data = reactive({ msg: 'hello' });
data.msg = 'world'; // 输出: 设置 msg 为 world
console.log(data.msg); // 输出: 读取 msg -> world

优点：自动拦截所有属性（包括新增属性），支持数组和复杂对象。

6. 使用场景与选择建议

• Object.defineProperty：

  • 需要精确控制单个属性的行为。
  • 兼容旧环境（如 IE9+）。
  • 实现简单的数据验证或计算属性。

• Proxy：

  • 需要拦截对象的多种操作（如删除、枚举等）。
  • 实现复杂的数据响应式系统（如 Vue 3）。
  • 创建不可变数据、日志记录、访问控制等高级功能。

7. 注意事项

• 性能考虑：Proxy 的拦截操作会引入额外开销，在性能敏感场景需谨慎使用。
• 不可撤销代理：Proxy.revocable() 可创建可撤销的代理，用于资源释放。
• this 指向：在 Proxy 的 get/set 中，receiver 参数指向代理对象本身，需注意 this 绑定。

通过以上对比，你可以根据具体需求选择使用 Object.defineProperty 进行细粒度属性控制，或使用 Proxy 实现更全面的对象行为拦截。两者在 JavaScript 元编程中各有其用武之地。