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

· 日常编程 · 275599

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

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层时会很有用。

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

  • 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;

这个例子展示了

Proxy

在数据响应式中的核心作用：

get

拦截器负责“记住”哪些代码（

effect

函数）读取了哪些数据，

set

拦截器则在数据改变时“提醒”那些记住的代码重新运行。通过

activeEffect

这个全局变量，我们巧妙地将正在执行的

effect

函数与它所依赖的数据关联起来。这与Vue 3的响应式系统核心思想非常相似，虽然实际的Vue源码会处理更多复杂的边界情况，比如嵌套对象的深度代理、数组方法的拦截、计算属性、watchers等，但基础逻辑就是这样。

以上就是JS如何实现代理？Proxy的拦截器的详细内容，更多请关注骃骐网【www.myinqi.com】。

相关推荐：

如何实现Python中线程安全的单例模式_使用元类metaclass或Lock加锁

因为__new__不是原子操作：线程A判断_instance为None后，未执行super().__new__前，线程B也判为None，导致重复创建；GIL不保护跨语句逻辑，需用双重检查锁定（DCL）加threading.Lock确保线程安全。 为什么直接用 __new__ 实现单例在多线程下会失效 因为 __new__ 本身不是原子操作：线程 A 判断 _instance 为 None 后，还没...

Python如何实现图的深度优先遍历_基于栈结构或递归函数实现

递归DFS栈溢出风险高因CPython默认递归深度仅1000，长链或环易触发RecursionError；隐式栈不可控，闭包和帧对象加剧内存开销；图应优先用显式栈实现。 递归实现DFS时，为什么栈溢出风险比预期高？ Python默认递归深度限制是1000层，图中存在长链或环状结构时极易触发RecursionError。这不是算法错，而是CPython解释器对递归调用的硬性约束。 用sys.setr...

Python如何实现一致性哈希算法_解决分布式缓存数据分配不均

一致性哈希通过固定哈希空间（如2^32）构建环形结构，节点和数据映射其上并顺时针就近分配；增删节点仅影响邻近区间，大幅减少数据迁移；引入虚拟节点可缓解物理节点分布不均问题，提升负载均衡性。 直接用 hash_ring 库最省事，但真要自己写、调参或排查分布不均问题，必须理解虚拟节点数量、哈希函数输出范围、环结构更新时机这三个关键点。 为什么简单取模（hash(key) % N）在节点变动时会崩 节...

Python Django中如何实现点赞收藏的计数功能_使用F表达式避免竞争条件

直接obj.likes += 1在并发下丢数据，是因为该操作分“读-改-写”三步：先查出旧值（如99），Python内存中加1得100，再保存；若两个请求同时执行，均基于99计算并写入100，最终结果为100而非102，造成更新丢失。 为什么直接 obj.likes += 1 在并发下会丢数据 多个用户几乎同时点赞时，Django 默认先查出当前 likes 值（比如 99），各自加 1 得到 1...

Python中Scikit-learn如何实现半监督学习_利用LabelPropagation

LabelPropagation要求数据具备局部平滑性，特征须标准化，未标记样本标签必须为-1，且需至少两个已标记类别；拟合用transduction_获取全部预测，不提供置信度，对噪声敏感。 LabelPropagation 在 scikit-learn 中的适用前提 LabelPropagation 不是万能半监督工具，它要求数据天然具备“局部平滑性”——即相似样本大概率共享标签。如果特征空间...

Python如何实现多态性_基于鸭子类型duck typing实现灵活的接口调用

鸭子类型是Python实现多态最自然的方式，只关注对象是否有所需方法而非其类型；运行时动态调用，零开销、兼容性强，但需靠文档和测试保障方法签名与返回值一致性。 duck typing 是 Python 实现多态最自然、最常用的方式——它不依赖继承或接口声明，只关心“对象有没有那个方法”，而不是“它是不是某个类的实例”。 为什么直接用 duck typing 就能实现多态 Python 在调用方法时...

Python Django 5.0如何实现计算字段持久化_使用GeneratedField提高查询效率

GeneratedField 在 Django 5.0 中需显式设 db_persist=True 才写入数据库并生成 STORED 列，否则仅临时计算；SQLite 不支持，PostgreSQL/MySQL 8.0+ 支持完整功能，但表达式须确定性且类型匹配，迁移后不可直接修改，Admin 默认不显示。 GeneratedField 在 Django 5.0 中能真正把计算逻辑下推到数据库层，但...