讲师中心 微信公众号
AI工具推荐 视频效率加速

怎样理解javascript代理对象_javascript中如何拦截操作

大宇吖_4935

大宇吖_4935

发布时间:2026-01-07 20:36:47

|

277人浏览过

|

来源于php中文网

原创

Proxy 是创建新代理对象以拦截对其的操作,而非修改原对象;需通过 handler 显式定义 get、set、ownKeys 等 trap,且 get/set 中须用 Reflect 方法并正确处理 receiver 参数。

怎样理解javascript代理对象_javascript中如何拦截操作

Proxy 是什么,它真能“拦截”操作?

Proxy 不是给对象加个钩子就自动生效的魔法,它创建的是一个全新对象,所有对它的访问(读、写、遍历、构造等)都会经过你定义的 handler。原对象本身完全不受影响——Proxy 拦截的是对代理对象的操作,不是对目标对象的操作。

常见误解是以为 const p = new Proxy(obj, handler) 会让 obj 变得可拦截,其实 obj 依然裸奔,只有 p 才走 handler。

最常用的拦截:get 和 set 怎么写才不出错?

get 和 set 是日常开发里用得最多的两个 trap,但它们的参数和返回值有明确契约,乱写容易引发静默失败或无限递归。

  • get(target, prop, receiver):第三个参数 receiver 是当前 Proxy 实例(或继承链上的调用者),用于正确绑定 this,比如在 getter 中调用 Reflect.get(target, prop, receiver) 而不是 target[prop]
  • set(target, prop, value, receiver):必须显式返回 true 表示赋值成功;返回 false 或抛异常会触发 TypeError(严格模式下)
  • 避免在 get 里直接读 target[prop],否则可能绕过后续拦截逻辑;推荐统一用 Reflect.get(...)
const obj = { x: 1 };
const p = new Proxy(obj, {
  get(target, prop, receiver) {
    console.log('读取', prop);
    return Reflect.get(target, prop, receiver); // ✅ 正确转发
  },
  set(target, prop, value, receiver) {
    console.log('设置', prop, '=', value);
    const result = Reflect.set(target, prop, value, receiver);
    if (!result) throw new Error(`赋值失败: ${prop}`);
    return result; // ✅ 必须返回布尔值
  }
});

for...in、Object.keys 为什么没被拦截?

因为它们底层调用的是 ownKeys + getOwnPropertyDescriptor,而不是 get。想控制属性枚举行为,必须显式实现这两个 trap:

Nginx Reverse Proxy
Nginx Reverse Proxy

配置 Nginx 反向代理,实现域名绑定。用户说“绑定域名”“配置 Nginx”“反向代理”时触发,将域名绑定到指定 IP:端口。

下载

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

  • ownKeys(target) 控制 Object.getOwnPropertyNames、Object.keys、for...in 等返回哪些 key(返回数组)
  • getOwnPropertyDescriptor(target, prop) 决定某个 key 的描述符是否暴露(比如是否可枚举、是否可配置)
  • 如果只写了 ownKeys 却没配 getOwnPropertyDescriptor,某些操作(如 JSON.stringify)可能拿不到完整信息

例如隐藏以 _ 开头的属性:

const p = new Proxy({ a: 1, _b: 2 }, {
  ownKeys(target) {
    return Reflect.ownKeys(target).filter(k => !k.startsWith('_'));
  },
  getOwnPropertyDescriptor(target, prop) {
    if (prop.startsWith('_')) return undefined;
    return Reflect.getOwnPropertyDescriptor(target, prop);
  }
});

Proxy 不能拦截哪些操作?

不是所有操作都能被 Proxy 拦截。几个典型漏网之鱼:

  • in 操作符:不触发 has?错,它会触发 has trap —— 但很多人忘了写,导致行为不符合预期
  • 实例方法调用(如 arr.push()):不走 get,而是走 apply(仅限函数对象)或原型链查找;数组方法本身无法被单个 Proxy 拦截,除非代理其原型或重写方法
  • 私有字段 #x:任何 Proxy 都无法拦截对私有字段的访问,这是语言硬性限制
  • Object.isExtensible、Object.preventExtensions 等元操作:需通过 isExtensible、preventExtensions 等 trap 显式控制,否则默认透传

真正容易被忽略的,是 receiver 参数在嵌套代理或继承场景下的作用——它决定了 this 绑定源头,漏传可能导致 getter/setter 中的 this 指向错误目标。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

Flowith
Flowith Hot

Flowith是一款基于画布和智能体工作流的 AI 协作工作空间。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

相关专题

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

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

2275

2023.08.07

json是什么
json是什么

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

3702

2023.08.23

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

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

1236

2023.10.13

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

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

4279

2025.09.10

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

2398

2023.09.20

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

0

2026.11.06

Postman请求头Headers怎么设置
Postman请求头Headers怎么设置

围绕Postman HTTP请求头配置展开,讲解Headers选项的具体使用方式,包括Key和Value参数填写、请求头信息添加、常见Header字段设置及请求头修改方法,帮助用户解决接口调试过程中遇到的请求头配置问题。

0

2026.11.06

Postman接口请求发送教程
Postman接口请求发送教程

详细介绍Postman接口请求的创建与发送方法,涵盖GET和POST请求、URL配置、请求参数、Headers请求头、Body请求体设置以及响应结果查看,帮助用户掌握Postman接口请求的完整操作流程。

0

2026.11.06

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

20

2026.11.05

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn