0

0

JavaScriptProxy代理如何拦截对象操作【教程】

紅蓮之龍

紅蓮之龍

发布时间:2026-01-30 15:59:11

|

199人浏览过

|

来源于php中文网

原创

Proxy 仅拦截明确的语言级操作(如 get/set/deleteProperty),无法捕获 Date/RegExp 等内置对象的内部槽访问,且 JSON.stringify、Object.assign 等不触发 trap;set 返回 false 在严格模式下静默失败,throw 则抛错;数组 length 变更不触发 deleteProperty。

javascriptproxy代理如何拦截对象操作【教程】

Proxy 不能拦截所有对象操作,关键看操作是否触发 get/set/deleteProperty 等 trap,且原始对象必须是可代理的(比如普通对象、数组),而 Date、RegExp、DOM 元素等原生对象部分行为无法被完全捕获。

哪些操作能被 Proxy 拦截

Proxy 的 traps 只响应明确的 JavaScript 语言级操作,不是“监听所有变化”。例如:

  • obj.prop → 触发 get trap
  • obj.prop = val → 触发 set trap(前提是该属性不是 writable: false
  • delete obj.prop → 触发 deleteProperty trap
  • prop in obj → 触发 has trap
  • Object.keys(obj) → 触发 ownKeys trap
  • for (let k of obj)(若 obj 是数组或有 [Symbol.iterator])→ 可能触发 get 访问 Symbol.iterator

JSON.stringify(obj) 不会触发任何 trap——它只读取自有可枚举属性,绕过 Proxy 层;Object.assign({}, obj) 同理,它用的是内部 [[Get]],仍走 get,但不触发 ownKeyshas,行为取决于目标对象的属性描述符。

为什么对 Date / RegExp / Promise 代理后行为异常

这些内置对象的内部槽(internal slots,如 [[DateValue]])无法通过常规属性访问,Proxy 的 traps 拦不到它们的内部读写。例如:

立即学习Java免费学习笔记(深入)”;

英特尔AI工具
英特尔AI工具

英特尔AI与机器学习解决方案

下载
const p = new Proxy(new Date(), {
  get(target, prop) {
    console.log('get', prop);
    return Reflect.get(target, prop);
  }
});
p.getTime(); // 输出 'get getTime',正常
p.toString(); // 输出 'get toString',也正常
p.getFullYear(); // 输出 'get getFullYear',但返回 NaN —— 因为 Date 方法依赖内部状态,而 Proxy 包裹后,getFullYear 调用时 this 指向的是 proxy 实例,不是原始 Date 对象,导致内部槽不可达

根本原因:Reflect.apply 或方法调用中,this 绑定失效。修复方式只能是显式绑定:target.getFullYear.call(target),但这要求你知道哪些方法需要特殊处理。

set trap 中 return false 和 throw 的区别

在严格模式下,set trap 返回 false 会静默失败(不报错,赋值无效);而 throw 会抛出 TypeError。但注意:

  • 非严格模式下,return false 会被忽略,赋值依然成功(这是历史遗留行为)
  • 现代代码几乎都运行在严格模式(模块、类、箭头函数等默认启用),所以 return false 是安全的静默拦截方式
  • 如果想让使用者感知拦截,应 throw new Error('xxx'),否则调试时容易误以为“没生效”
  • 不要在 set 里直接 target[key] = value 后再 return true——这会跳过原型链上的 setter,正确做法是 Reflect.set(target, key, value, receiver),其中 receiver 保证 setter 正确触发

常见陷阱:代理后的数组 length 变更不触发 set

数组的 length 属性是数据属性,但修改它可能间接删除元素。例如:

const arr = [1, 2, 3];
const p = new Proxy(arr, {
  set(target, prop, value) {
    console.log('set', prop, value);
    return Reflect.set(target, prop, value);
  }
});
p.length = 1; // 输出 'set length 1',但不会触发对索引 '2'、'1' 的 deleteProperty

也就是说:length 缩小时,被删掉的索引项不会经过 deleteProperty trap,也不会触发 set。这是 ES 规范定义的行为,Proxy 无法改变。若需响应“数组变短”,只能在 set 中手动检测 prop === 'length' 并做额外清理。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

420

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

536

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

311

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

77

2025.09.10

scripterror怎么解决
scripterror怎么解决

scripterror的解决办法有检查语法、文件路径、检查网络连接、浏览器兼容性、使用try-catch语句、使用开发者工具进行调试、更新浏览器和JavaScript库或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

228

2023.10.18

500error怎么解决
500error怎么解决

500error的解决办法有检查服务器日志、检查代码、检查服务器配置、更新软件版本、重新启动服务、调试代码和寻求帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

297

2023.10.25

scripterror怎么解决
scripterror怎么解决

scripterror的解决办法有检查语法、文件路径、检查网络连接、浏览器兼容性、使用try-catch语句、使用开发者工具进行调试、更新浏览器和JavaScript库或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

228

2023.10.18

500error怎么解决
500error怎么解决

500error的解决办法有检查服务器日志、检查代码、检查服务器配置、更新软件版本、重新启动服务、调试代码和寻求帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

297

2023.10.25

C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号