JS如何实现代理？Proxy的拦截器-js教程-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层时会很有用。

Text Mark
处理文本内容的AI助手

81

查看详情

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

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;

登录后复制

这个例子展示了