如何通过 属性劫持(Proxy) 监控浅拷贝过程中的原始值读取行为

小墨姑娘_8247

小墨姑娘_8247

2026-05-19

339人浏览

原创

proxy 的 get trap 在浅拷贝中不触发,因为浅拷贝直接访问对象内部存储结构,绕过 javascript 层属性读取;需通过 ownkeys 和 getownpropertydescriptor trap 拦截键枚举与描述符获取来间接监控。

如何通过 属性劫持(proxy) 监控浅拷贝过程中的原始值读取行为

Proxy 无法直接监控浅拷贝过程中的原始值读取行为,因为浅拷贝(如 Object.assign()、展开运算符 {...obj}、Array.prototype.slice() 等)本质上是**同步的、底层的属性遍历与赋值操作**,不经过 JavaScript 层的常规读取(即不触发 get trap),尤其对原始值(string/number/boolean/null/undefined/symbol)和普通对象属性而言。

为什么 Proxy 的 get trap 在浅拷贝中通常不触发?

浅拷贝时,引擎会直接访问对象内部的属性存储结构(例如 V8 的 JSObject 属性字典或快属性数组),绕过代理的拦截逻辑。只有当代码显式通过点号(obj.key)或方括号(obj[key])访问属性时,才会走 Proxy 的 get trap。

例如:

FastAPI Flask Proxy
FastAPI Flask Proxy

FastAPI + Flask 混合部署最佳实践,解决路由定义、API 代理等常见问题,适用于同时运行 FastAPI API 与 Flask 前端的场景。

下载
const target = { a: 1, b: 'hello' };
const proxy = new Proxy(target, {
  get(obj, key) {
    console.log('get triggered:', key);
    return obj[key];
  }
});

const copy = { ...proxy }; // ✅ 这里不会触发 get!
// 控制台无输出

可行的监控思路:拦截“可观察对象”的访问入口

要间接捕获浅拷贝中的读取意图,需将监控点前移到**拷贝发起前的属性枚举阶段**,而非依赖 get。关键在于:浅拷贝依赖 [[OwnPropertyKeys]](获取键名)和 getOwnPropertyDescriptor(获取描述符),这些可被 Proxy 拦截。

  • 用 ownKeys trap 捕获“哪些键将被拷贝”:它在展开运算符、Object.keys()、Reflect.ownKeys() 等枚举操作中必触发。
  • 用 getOwnPropertyDescriptor trap 捕获“每个键的值类型与可读性”:浅拷贝内部会调用该方法获取属性描述符(含 value 字段),此时可记录原始值读取意图。
  • 配合 get trap 做兜底(仅对显式读取有效):虽不覆盖浅拷贝本身,但能覆盖调试、日志、IDE 预览等伴随行为。

实操示例:监控对象浅拷贝时的键与原始值读取

以下 Proxy 可在 {...proxy} 或 Object.assign({}, proxy) 执行时,输出被拷贝的键及其原始值:

function createTracedProxy(obj) {
  return new Proxy(obj, {
    ownKeys(target) {
      console.log('[ownKeys] enumerating keys:', Reflect.ownKeys(target));
      return Reflect.ownKeys(target);
    },

    getOwnPropertyDescriptor(target, key) {
      const desc = Reflect.getOwnPropertyDescriptor(target, key);
      if (desc && desc.enumerable && desc.configurable && !desc.get) {
        // 是数据属性(非 accessor),且值为原始值或简单值
        const value = desc.value;
        if (value === null || 
            typeof value === 'string' || 
            typeof value === 'number' || 
            typeof value === 'boolean' || 
            typeof value === 'symbol' ||
            value === undefined) {
          console.log(`[getOwnPropertyDescriptor] reading primitive value of "${key}":`, value);
        }
      }
      return desc;
    },

    // get 作为辅助(显式访问时触发)
    get(target, key) {
      const value = target[key];
      if (value !== undefined && 
          (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean')) {
        console.log(`[get] explicit read of "${key}":`, value);
      }
      return value;
    }
  });
}

// 使用
const data = { x: 42, y: 'abc', z: true };
const traced = createTracedProxy(data);
const copy = { ...traced }; // 输出 ownKeys 和 getOwnPropertyDescriptor 日志

注意事项与局限

这种方案是“可观测逼近”,不是“精确劫持”:

  • 无法捕获 JSON.stringify() 或 structuredClone() 中的读取——它们走的是序列化协议,不调用 ownKeys 或 getOwnPropertyDescriptor。
  • 对 getter 属性无效:若原始属性是 get foo() { return this._x; },则 getOwnPropertyDescriptor 返回的是 accessor 描述符,value 为 undefined,此时需额外在 get trap 中处理。
  • 不能阻止或修改拷贝结果:Proxy 只能观察,不能重写浅拷贝的底层行为;若需干预,应改用深克隆 + 自定义逻辑,或用 structuredClone 配合 transfer 或 replacer(但原生不支持)。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

2023.06.20

4726

5

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

2023.07.04

1169

3

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

2023.07.04

4664

6

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

920

4

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

1836

5

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

2023.09.04

3365

4

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

2023.09.12

4373

6

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

2023.09.20

2860

5

java访问控制修饰符介绍
java访问控制修饰符介绍

java访问控制修饰符有四种,分别是public、protected、private、默认访问修饰符。详细介绍:1、public,public是最宽松的访问控制修饰符,被修饰的类、方法和变量可以被任何其他类访问,当一个类、方法或变量被声明为public时,它们可以在任何地方被访问,无论是同一个包中的类还是不同包中的类;2、protected修饰符等等。

2023.09.20

908

7

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
phpStudy极速入门视频教程
phpStudy极速入门视频教程

共6课时 | 54.6万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时 | 133.4万人学习