JavaScript 中的属性劫持与 Proxy 代理的深层原理

在 JavaScript 中，属性劫持 是一种在对象的属性被访问、设置、删除等操作时，能够拦截并执行自定义逻辑的机制。这主要通过 ES5 的 Object.defineProperty 和 ES6 引入的 Proxy 对象来实现。Proxy 提供了更强大、更全面的拦截能力，是元编程（编写能够操作程序的程序）的重要工具。下面我会深入讲解其原理、对比和实现细节。

1. 背景与基本概念

• 什么是属性劫持？
  在 JavaScript 中，对象属性的读取、赋值、删除等操作通常是透明的。属性劫持允许我们“监听”这些操作，并在操作发生时触发自定义行为，比如数据验证、日志记录、数据绑定等。
• 为什么需要它？
  在 Vue 2.x 中，Object.defineProperty 用于实现响应式系统；在 Vue 3 中，改用 Proxy 实现。它也是实现高级模式（如观察者模式、数据校验）的基础。

2. Object.defineProperty 的拦截方式

Object.defineProperty 只能拦截已存在属性的读取（get）和设置（set），但无法拦截新增属性、删除属性等操作。其工作原理如下：

步骤 1：定义一个对象并添加拦截

let obj = { name: 'Alice' };
let _age = 18; // 内部变量，用于存储真实值

Object.defineProperty(obj, 'age', {
  enumerable: true,    // 可枚举
  configurable: true,  // 可配置
  get() {
    console.log(`读取 age: ${_age}`);
    return _age;
  },
  set(newVal) {
    if (newVal < 0) {
      console.error('年龄不能为负');
      return;
    }
    console.log(`设置 age: ${newVal}`);
    _age = newVal;
  }
});

步骤 2：测试拦截效果

console.log(obj.age); // 输出: 读取 age: 18
obj.age = 25;         // 输出: 设置 age: 25
obj.age = -5;         // 输出: 年龄不能为负（不会修改）

• 局限性：
  • 无法拦截 obj.newProp = 1（新增属性）。
  • 无法拦截 delete obj.name（删除属性）。
  • 需要为每个属性单独定义拦截器，性能开销大。

3. Proxy 的全面拦截

Proxy 是 ES6 引入的“代理”对象，可以创建一个对象的代理，从而拦截并自定义该对象的基本操作（如属性访问、赋值、枚举、函数调用等）。它提供了 13 种可拦截的操作（称为“陷阱”，traps）。

步骤 1：创建一个 Proxy 代理

let target = { name: 'Alice', age: 18 };
let handler = {
  // 拦截属性读取
  get(obj, prop) {
    console.log(`读取属性: ${prop}`);
    return prop in obj ? obj[prop] : '默认值';
  },
  // 拦截属性设置
  set(obj, prop, value) {
    if (prop === 'age' && value < 0) {
      throw new Error('年龄不能为负');
    }
    console.log(`设置属性: ${prop} = ${value}`);
    obj[prop] = value;
    return true; // 表示设置成功
  },
  // 拦截删除属性
  deleteProperty(obj, prop) {
    console.log(`删除属性: ${prop}`);
    delete obj[prop];
    return true;
  },
  // 拦截 in 操作符
  has(obj, prop) {
    console.log(`检查属性存在: ${prop}`);
    return prop in obj;
  }
};

let proxy = new Proxy(target, handler);

步骤 2：测试 Proxy 的拦截

console.log(proxy.name); // 输出: 读取属性: name → "Alice"
proxy.age = 25;          // 输出: 设置属性: age = 25
proxy.newProp = 100;     // 输出: 设置属性: newProp = 100（支持新增）
console.log('age' in proxy); // 输出: 检查属性存在: age → true
delete proxy.name;       // 输出: 删除属性: name

• 优势：
  • 可拦截多达 13 种操作（如 get、set、has、deleteProperty、apply（函数调用）、construct（new 操作）等）。
  • 对新增属性、删除属性、数组操作等都能拦截。
  • 无需为每个属性单独定义拦截器。

4. 深层原理：如何实现响应式系统

以 Vue 3 的响应式为例，其核心是利用 Proxy 递归代理对象的每一层，实现深层属性的监听：

function reactive(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj; // 非对象直接返回
  }
  const handler = {
    get(target, key) {
      console.log(`读取: ${key}`);
      const res = Reflect.get(target, key);
      // 如果是对象，递归代理
      return typeof res === 'object' ? reactive(res) : res;
    },
    set(target, key, value) {
      console.log(`设置: ${key} -> ${value}`);
      return Reflect.set(target, key, value);
    }
  };
  return new Proxy(obj, handler);
}

let data = reactive({ 
  user: { name: 'Bob', hobbies: ['coding'] } 
});
data.user.name;           // 输出: 读取: user → 读取: name
data.user.hobbies.push('music'); // 注意：数组 push 不会触发 set，需特殊处理

• 注意：数组方法（如 push、pop）修改数组时，不会触发 set 陷阱，因为它们是修改数组内容而非属性赋值。Vue 3 通过重写数组方法来处理。

5. 性能与注意事项

• 性能对比：Proxy 比 Object.defineProperty 更高效，因为它是“懒拦截”，只在属性被访问时才触发，无需遍历所有属性。
• 局限性：
  • Proxy 无法代理原始值（如字符串、数字）。
  • 代理后的对象不等于原始对象：proxy !== target。
  • 某些内置对象（如 Date、Map）的内部槽（internal slots）可能无法被完全代理。
• Reflect 对象：通常与 Proxy 配合使用，它提供了与 Proxy 陷阱一一对应的静态方法，用于调用对象的默认行为，避免重复代码。

6. 实际应用场景

1. 数据验证：在属性赋值时验证数据类型。
2. 日志记录：跟踪对象属性的访问和修改。
3. 缓存机制：在 get 陷阱中实现缓存逻辑。
4. 观察者模式：属性变化时自动通知依赖。
5. 负索引数组：通过 Proxy 实现 arr[-1] 访问最后一个元素。

// 示例：负索引数组
function createNegativeArray(arr) {
  return new Proxy(arr, {
    get(target, prop) {
      let index = Number(prop);
      if (index < 0) index = target.length + index;
      return target[index];
    }
  });
}
let arr = createNegativeArray([10, 20, 30]);
console.log(arr[-1]); // 输出: 30

总结

• Object.defineProperty：适用于简单属性拦截，但功能有限，主要用于 ES5 环境。
• Proxy：功能全面，可拦截对象的各种操作，是实现高级元编程和响应式系统的现代方案。
• 选择建议：在新项目中优先使用 Proxy，注意处理其边界情况（如数组方法、内置对象）。