Proxy 与 Object.defineProperty 深度解析：JavaScript 拦截机制对比

核心特点

• 属性级拦截：只能拦截特定属性的读写操作
• 需预先定义：必须在属性访问前定义拦截器
• 直接修改对象：会修改原始对象的结构
• Vue2 的响应式基础：Vue2 使用它实现数据响应式

数组处理的局限性

const arr = [1, 2, 3];
arr.forEach((_, index) => {
  Object.defineProperty(arr, index, {
    get() {
      console.log(`获取 index ${index}`);
      return this[`_${index}`];
    },
    set(value) {
      console.log(`设置 index ${index}`);
      this[`_${index}`] = value;
    }
  });
});
arr[0] = 10; // 设置 index 0
console.log(arr[1]); // 获取 index 1 → 2
// 但无法检测以下操作：
arr.push(4); // 无拦截
arr.length = 0; // 无拦截

2.2 Proxy

推出时间：ES6

原理：创建一个'代理'对象，所有对原对象的操作都会先经过代理，再由 handler 中对应的 trap（陷阱）方法处理。

基础语法与使用

const target = { name: 'Bob', age: 30 };
const handler = {
  get(target, prop) {
    console.log(`读取属性：${prop}`);
    return Reflect.get(target, prop);
  },
  set(target, prop, value) {
    console.log(`设置属性：${prop} = ${value}`);
    return Reflect.set(target, prop, value);
  }
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // 读取属性：name → Bob
proxy.age = 31; // 设置属性：age = 31

核心特点

• 对象级拦截：拦截整个对象的所有操作
• 13 种拦截类型：支持 get, set, has, deleteProperty 等
• 非侵入式：不修改原始对象，创建代理对象
• 动态代理：可在运行时创建和修改

完整的数组拦截

const arrayHandler = {
  get(target, prop) {
    if (prop === 'push') {
      return function (...args) {
        console.log('数组 push 操作:', ...args);
        return Array.prototype.push.apply(target, args);
      };
    }
    return Reflect.get(target, prop);
  }
};
const arr = [1, 2, 3];
const proxyArr = new Proxy(arr, arrayHandler);
proxyArr.push(4); // 数组 push 操作：4
console.log(proxyArr); // [1, 2, 3, 4]

3. 使用方式对比

4. 实战应用案例

4.1 Vue2 响应式原理 (defineProperty)

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log(`获取 ${key}: ${val}`);
      return val;
    },
    set(newVal) {
      console.log(`设置 ${key}: ${newVal}`);
      val = newVal;
    }
  });
}
const vue2Data = {};
defineReactive(vue2Data, 'message', 'Hello Vue2');
vue2Data.message = 'Updated'; // 设置 message: Updated

4.2 Vue3 响应式原理 (Proxy)

function reactive(target) {
  return new Proxy(target, {
    get(target, key) {
      console.log(`获取 ${String(key)}`);
      return Reflect.get(target, key);
    },
    set(target, key, value) {
      console.log(`设置 ${String(key)} = ${value}`);
      return Reflect.set(target, key, value);
    }
  });
}
const vue3Data = reactive({ message: 'Hello Vue3' });
vue3Data.message = 'Updated'; // 设置 message = Updated

4.3 高级验证器实现 (Proxy)

const validator = {
  set(target, prop, value) {
    if (prop === 'age') {
      if (typeof value !== 'number') throw new TypeError('年龄必须是数字');
      if (value < 0) throw new RangeError('年龄不能为负数');
    }
    if (prop === 'email') {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(value)) throw new Error('邮箱格式无效');
    }
    return Reflect.set(target, prop, value);
  }
};
const user = new Proxy({}, validator);
user.age = 25; // 成功
user.email = '[email protected]'; // 成功
try {
  user.age = -5; // 抛出错误：年龄不能为负数
} catch (e) {
  console.error(e.message);
}

5. 深度监听实现对比

5.1 defineProperty 深度监听

function observe(obj) {
  if (typeof obj !== 'object' || obj === null) return;
  Object.keys(obj).forEach(key => {
    let value = obj[key];
    observe(value); // 递归监听
    Object.defineProperty(obj, key, {
      get() {
        console.log(`获取 ${key}`);
        return value;
      },
      set(newVal) {
        if (newVal === value) return;
        observe(newVal); // 监听新值
        console.log(`设置 ${key} = ${newVal}`);
        value = newVal;
      }
    });
  });
}
const data = { user: { name: 'Alice' } };
observe(data);
data.user.name = 'Bob'; // 获取 user → 设置 user.name = Bob

5.2 Proxy 深度监听

function deepProxy(target) {
  if (typeof target === 'object' && target !== null) {
    for (const key in target) {
      if (typeof target[key] === 'object') {
        target[key] = deepProxy(target[key]);
      }
    }
    return new Proxy(target, {
      get(target, prop) {
        console.log(`读取 ${prop}`);
        return Reflect.get(target, prop);
      },
      set(target, prop, value) {
        if (typeof value === 'object') {
          value = deepProxy(value);
        }
        console.log(`设置 ${prop} = ${value}`);
        return Reflect.set(target, prop, value);
      }
    });
  }
  return target;
}
const data = deepProxy({ user: { name: 'Alice' } });
data.user.name = 'Bob'; // 读取 user → 设置 name = Bob

6. 场景与选型建议

虽然 Proxy 相较于 Object.defineProperty 具备更高的性能以及更多的支持，但是在某些场景下 Object.defineProperty 还是有必要的，总结如下：

7. 结语

• Object.defineProperty 简单、兼容性好，但只能逐个属性配置，难以一次性拦截整个对象。
• Proxy 功能强大、拦截面广，适合做状态管理、数据双向绑定、权限控制等高级场景，但需要考虑兼容性与性能开销。

随着浏览器支持度的提高，Proxy 正成为越来越主流的解决方案。Vue3 的响应式系统全面转向 Proxy 也印证了这一趋势。然而，defineProperty 在特定场景下仍有其价值，特别是在需要支持旧版浏览器或进行精细属性控制时。

希望本文能帮开发者理清两者差异，并在开发中快速落地合适的方案。