javascript中的Proxy是什么_如何用它实现数据劫持-js教程-PHP中文网

javascript中的Proxy是什么_如何用它实现数据劫持

幻影之瞳

发布： 2025-12-18 18:11:02

原创

528人浏览过

Proxy 是 JavaScript 中用于拦截并自定义对象基本操作的构造函数，通过代理层实现数据劫持；支持 13 种 trap，如 get、set、has、deleteProperty、ownKeys 等；可天然监听动态属性、数组操作及嵌套对象，但需手动处理深层响应式与数组方法；相比 Object.defineProperty，Proxy 更强大灵活，但不兼容 IE。

javascript中的proxy是什么_如何用它实现数据劫持

Proxy 是 JavaScript 中用于拦截并自定义对象基本操作的构造函数，它不是直接修改对象本身，而是创建一个“代理层”，让所有对目标对象的访问都经过这个中间层——这正是实现数据劫持的核心机制。

Proxy 能拦截哪些操作？

Proxy 支持 13 种可拦截的操作（trap），常用包括：

get：读取属性时触发，适合监听依赖收集（如 Vue 响应式）
set：设置属性时触发，适合响应式更新、数据校验、自动转换
has：in 操作符触发，可隐藏属性
deleteProperty：delete 操作触发，控制删除权限
ownKeys：Object.keys / for...in 触发，可过滤或添加枚举属性

用 Proxy 实现基础响应式数据劫持

与 Object.defineProperty 不同，Proxy 可以监听动态新增/删除属性、数组索引赋值、length 修改等，天然支持数组和嵌套对象。

简单示例：拦截 set/get，打印变化并触发更新函数：

Android配合WebService访问远程数据库中文WORD版

采用HttpClient向服务器端action请求数据，当然调用服务器端方法获取数据并不止这一种。WebService也可以为我们提供所需数据，那么什么是webService呢？，它是一种基于SAOP协议的远程调用标准，通过webservice可以将不同操作系统平台，不同语言，不同技术整合到一起。实现Android与服务器端数据交互，我们在PC机器java客户端中，需要一些库，比如XFire,Axis2,CXF等等来支持访问WebService，但是这些库并不适合我们资源有限的android手机客户端，

查看详情

立即学习“Java免费学习笔记（深入）”；

function reactive(obj, onUpdate) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      console.log(`读取 ${key}`);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      console.log(`设置 ${key} =`, value);
      const result = Reflect.set(target, key, value, receiver);
      onUpdate && onUpdate(); // 触发视图更新
      return result;
    }
  });
}

const state = reactive({ count: 0 }, () => console.log('视图需刷新'));
state.count++; // 输出：设置 count = 1 → 视图需刷新

登录后复制

注意深层响应式与陷阱

Proxy 默认只代理第一层。要实现嵌套对象响应式，需在 get 中递归代理：

每次 get 返回值是对象时，自动 wrap 一层 Proxy（避免重复代理，可用 WeakMap 缓存）
set 时若新值是对象，也要递归 reactive 它
数组方法如 push/pop 会触发 set（如修改 length）或 ownKeys（影响 for...in），但不会触发 set(index)，需额外处理或重写数组方法
Proxy 无法拦截普通函数调用、instanceof、typeof 等操作，这些需配合其他手段（如封装函数、使用 Reflect）