JS如何实现代理？Proxy的拦截器

月夜之吻

发布时间：2025-08-20 10:36:02

481人浏览过

来源于php中文网

原创

javascript中实现代理的核心机制是es6的proxy对象，它通过拦截目标对象的操作实现自定义行为，需传入目标对象和包含get、set、apply等陷阱方法的handler对象，结合reflect确保正确执行默认操作，从而实现如数据校验、响应式系统等高级功能，相比object.defineproperty具有拦截更全面、支持动态属性和数组操作的优势，尽管存在兼容性限制，但已成为现代前端框架如vue 3实现响应式系统的首选方案。

JS如何实现代理？Proxy的拦截器

JavaScript中实现代理的核心机制，无疑就是ES6引入的

Proxy

对象。它允许你创建一个目标对象的“替身”，所有对这个替身的操作，比如读取属性、修改属性、调用方法甚至是

new

一个实例，都可以被你自定义的“拦截器”（handler methods，也叫“陷阱” traps）捕获并处理。简单来说，

Proxy

就是提供了一种在操作对象前，插入我们自己逻辑的能力。

解决方案

要使用

Proxy

，你需要给它两个参数：你想要代理的

target

（目标对象）和一个

handler

对象。这个

handler

对象就是我们定义各种拦截行为的地方，它里面包含了许多预定义的“陷阱”方法，比如

get

（拦截属性读取）、

set

（拦截属性设置）、

apply

（拦截函数调用）等等。

一个最基础的代理实现看起来是这样的：

const targetObject = {
  message: 'Hello, world!',
  count: 0
};

const handler = {
  // 拦截属性读取
  get(target, property, receiver) {
    console.log(`有人尝试读取属性: ${String(property)}`);
    // 使用Reflect.get确保默认行为，并正确处理this指向
    return Reflect.get(target, property, receiver);
  },
  // 拦截属性设置
  set(target, property, value, receiver) {
    console.log(`有人尝试设置属性: ${String(property)} 为 ${value}`);
    if (property === 'count' && typeof value !== 'number') {
      console.warn('count属性必须是数字！');
      return false; // 阻止设置
    }
    // 使用Reflect.set确保默认行为
    return Reflect.set(target, property, value, receiver);
  }
};

const proxiedObject = new Proxy(targetObject, handler);

// 测试代理
console.log(proxiedObject.message); // 触发get拦截
proxiedObject.count = 10;          // 触发set拦截
proxiedObject.count = 'abc';       // 触发set拦截，并被警告
console.log(proxiedObject.count);

在这里，

Reflect

对象扮演了一个非常重要的角色。它提供了一组与

Proxy

拦截器方法一一对应的方法，用于执行默认的对象操作。使用

Reflect

的好处在于，它能确保在拦截器内部执行的原始操作行为正确，尤其是在处理

this

指向或继承链时，能避免一些潜在的问题。在我看来，只要你在

Proxy

的拦截器里做了自定义逻辑后还需要执行原生的操作，就应该优先考虑

Reflect

。

Proxy拦截器有哪些常见类型？它们各自有什么用途？

Proxy

的拦截器种类相当丰富，每一种都对应着对目标对象的一种特定操作。理解它们各自的用途，是掌握

Proxy

的关键。

```
get(target, property, receiver)
```
: 这是最常用的拦截器之一，它会在你尝试读取一个属性时被调用。想象一下，你可能想在读取某个配置项之前，先检查它是否存在，或者实现一个惰性加载的机制，只有当属性被访问时才去计算或获取它的值。例如，一个日志系统可以在每次数据被读取时记录下来，或者一个缓存系统可以在这里判断是否从缓存中返回数据。
```
receiver
```
参数通常指向代理对象本身，或者继承链上调用了该属性的对象。
```
set(target, property, value, receiver)
```
: 当你尝试设置（修改）一个属性时，
```
set
```
拦截器就会被触发。这个拦截器非常适合做数据校验，比如确保某个属性只能被设置为特定类型的值。它也可以用来触发“副作用”，比如当数据模型发生变化时，自动更新UI界面，或者通知其他模块数据已更新。我个人觉得，这是实现数据响应式最直观的入口。
```
apply(target, thisArg, argumentsList)
```
: 如果你的目标对象是一个函数，那么当你调用这个函数时，
```
apply
```
拦截器就会被激活。这使得你可以在函数执行前进行参数校验、权限验证，或者在函数执行后进行结果的后处理。比如，你可以用它来给所有函数调用添加日志记录功能，或者实现一个简单的节流/防抖。
```
construct(target, argumentsList, newTarget)
```
: 当你使用
```
new
```
操作符来实例化一个被代理的构造函数时，
```
construct
```
拦截器就会被调用。这给了你一个机会去修改构造函数的行为，比如返回一个完全不同的对象，或者在返回实例之前对其进行一些额外的初始化。这在实现一些高级的工厂模式或者ORM层时会很有用。

PhotoScissors
免费自动图片背景去除

下载

除了这些，还有一些不那么常用但同样强大的拦截器，比如：

has(target, property)
: 拦截
```
in
```
操作符。
deleteProperty(target, property)
: 拦截
```
delete
```
操作符。

defineProperty(target, property, descriptor)
: 拦截

Object.defineProperty

。

getOwnPropertyDescriptor(target, property)
: 拦截

Object.getOwnPropertyDescriptor

。

getPrototypeOf(target)
: 拦截

Object.getPrototypeOf

。

isExtensible(target)
: 拦截
```
Object.isExtensible
```
。

ownKeys(target)
: 拦截

Object.keys()

Object.getOwnPropertyNames()

Object.getOwnPropertySymbols()

。

每种拦截器都对应着JavaScript对象操作的某个环节，提供了极大的灵活性去定制对象的行为。

Proxy相比Object.defineProperty有哪些优势和局限？

在前端框架中，尤其是涉及到数据响应式时，我们常常会把

Proxy

和

Object.defineProperty

拿来比较。两者都能实现数据监听，但它们的设计哲学和能力边界有着显著的区别。

Proxy

的优势：

全方位拦截： 这是
```
Proxy
```
最大的优势。
```
Object.defineProperty
```
只能监听对象属性的读写，而
```
Proxy
```
能拦截几乎所有对对象的操作，包括属性的读取(
```
get
```
)、设置(
```
set
```
)、删除(
```
deleteProperty
```
)、函数的调用(
```
apply
```
)、构造函数的调用(
```
construct
```
)，甚至是
```
in
```
操作符(
```
has
```
)、枚举属性(
```
ownKeys
```
)等等。这意味着
```
Proxy
```
能够提供更细粒度和更全面的控制。
无需遍历对象属性：
```
Object.defineProperty
```
在监听对象时，需要遍历对象的所有属性，并为每个属性设置getter/setter。对于嵌套对象，你还需要递归地去定义。这意味着如果后续有新属性添加到对象上，
```
Object.defineProperty
```
无法自动监听，需要手动再次处理。而
```
Proxy
```
直接代理整个对象，无需关心属性数量，新添加的属性也能被自动代理。这在处理动态数据结构时非常方便。
数组监听更自然：
```
Object.defineProperty
```
在监听数组的
```
push
```
,
```
pop
```
,
```
shift
```
等方法时非常麻烦，因为它无法直接拦截这些方法对数组长度和内容的改变。你通常需要重写这些数组方法。
```
Proxy
```
则可以通过拦截
```
set
```
（用于索引赋值和长度改变）和
```
deleteProperty
```
（用于删除元素）等操作，更自然地实现对数组变化的监听。
代理非对象类型： 虽然不常见，但
```
Proxy
```
理论上可以代理函数（因为函数也是对象），甚至可以代理类。

Proxy

的局限：

兼容性问题：
```
Proxy
```
是ES6的新特性，对于IE浏览器是完全不支持的。这意味着在需要兼容老旧浏览器的项目中，你可能仍然需要依赖
```
Object.defineProperty
```
或者其他方案。
this
指向问题：在
```
Proxy
```
的拦截器内部，
```
this
```
默认指向
```
handler
```
对象本身，而不是被代理的目标对象。虽然通常可以通过
```
Reflect
```
来解决，但在某些复杂场景下，开发者需要特别注意
```
this
```
的正确绑定。
无法直接代理原生对象内部的私有方法或属性：
```
Proxy
```
只能拦截对代理对象公开接口的操作，对于目标对象内部的私有状态或方法，它无能为力。不过，这通常不是问题，因为我们通常只关心公开的接口。
性能开销： 理论上，
```
Proxy
```
在每次操作时都会引入一个额外的拦截层，这可能会带来微小的性能开销。但在现代JavaScript引擎的优化下，这种开销在大多数实际应用中几乎可以忽略不计。

总的来说，

Proxy

在功能上远超

Object.defineProperty

，它提供了更强大、更灵活的拦截能力，尤其是在实现数据响应式、ORM、或者更复杂的元编程场景中，

Proxy

是更优的选择。Vue 3放弃了

Object.defineProperty

而全面拥抱

Proxy

，就是最好的证明。

如何利用Proxy实现一个简易的数据响应式系统？

利用

Proxy

实现一个简易的数据响应式系统，是理解其强大能力的一个绝佳实践。核心思想是：当数据被读取时，我们“收集”哪些函数依赖于它；当数据被修改时，我们“通知”所有依赖这个数据的函数重新执行。

这里我们构建一个非常简化的模型，不考虑嵌套对象、数组方法等复杂情况，只关注核心的

get

和

set

拦截。

// 存储当前正在执行的“副作用”函数（effect function）
let activeEffect = null;

// 用于收集依赖的Map
// key: target对象
// value: Map (key: property, value: Set of effects)
const targetMap = new WeakMap();

// 依赖收集函数
function track(target, key) {
  if (activeEffect) { // 只有在有副作用函数正在执行时才收集
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      targetMap.set(target, (depsMap = new Map()));
    }
    let dep = depsMap.get(key);
    if (!dep) {
      depsMap.set(key, (dep = new Set()));
    }
    dep.add(activeEffect); // 将当前副作用函数添加到依赖集合中
  }
}

// 依赖触发函数
function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return; // 如果没有依赖，直接返回
  const dep = depsMap.get(key);
  if (dep) {
    dep.forEach(effect => effect()); // 遍历并执行所有依赖该属性的副作用函数
  }
}

// 包装副作用函数
function effect(fn) {
  const effectFn = () => {
    activeEffect = effectFn; // 设置当前正在执行的副作用函数
    try {
      fn(); // 执行副作用函数，期间会触发get拦截，进行依赖收集
    } finally {
      activeEffect = null; // 执行完毕后清空
    }
  };
  effectFn(); // 立即执行一次，进行初始的依赖收集
  return effectFn; // 返回effect函数，方便后续手动停止或执行
}

// 响应式化函数
function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      track(target, key); // 收集依赖
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      trigger(target, key); // 触发依赖
      return result;
    }
  });
}

// --- 使用示例 ---

const state = reactive({
  count: 0,
  name: 'World'
});

console.log('--- 第一次 effect ---');
effect(() => {
  console.log(`Count is: ${state.count}`); // 读取state.count，进行依赖收集
});

console.log('--- 第二次 effect ---');
effect(() => {
  console.log(`Hello, ${state.name}!`); // 读取state.name，进行依赖收集
});

console.log('\n--- 改变 count ---');
state.count++; // 触发set，然后触发effect函数重新执行
console.log('count changed to', state.count);

console.log('\n--- 改变 name ---');
state.name = 'Vue'; // 触发set，然后触发effect函数重新执行
console.log('name changed to', state.name);

console.log('\n--- 再次改变 count ---');
state.count += 5;

这个例子展示了