0

0

什么是JavaScript中的代理与反射【教程】

夜晨

夜晨

发布时间:2026-01-17 21:24:10

|

374人浏览过

|

来源于php中文网

原创

Proxy是唯一能全面拦截对象动态操作的机制,Reflect是其拦截器中必须配合使用的默认行为实现,直接操作target会破坏属性描述符、getter/setter绑定和receiver语义。

什么是javascript中的代理与反射【教程】

Proxy 是 JavaScript 中唯一能**全面拦截对象动态操作**的机制;Reflect 不是辅助工具,而是 Proxy 拦截器里**必须配合使用的默认行为实现**。不用 Reflect,几乎必然破坏原型链、getter/setter 的 this 绑定,或让私有字段(#field)直接报错。

为什么 set/get 拦截里必须用 Reflect.set()Reflect.get()

直接写 target[prop] = valuetarget[prop] 看似省事,但会绕过三类关键语义:

  • 属性描述符:比如 writable: false 的属性,target[prop] = value 会静默失败(非严格模式)或抛错(严格模式),而 Reflect.set() 明确返回 false,让你可控处理
  • 访问器(getter/setter):直接赋值不触发 setter 内部逻辑,this 也指向 target 而非代理对象,导致像 this._name 读写错乱
  • receiver 参数缺失:这是 Vue/MobX 响应式依赖收集的关键。不用 Reflect.get(target, prop, receiver),继承链上的 getter 就查不到、Symbol 属性可能漏掉、私有字段直接 throw

正确写法:

const handler = {
  get(target, prop, receiver) {
    console.log(`GET ${prop}`);
    return Reflect.get(target, prop, receiver); // ✅
  },
  set(target, prop, value, receiver) {
    console.log(`SET ${prop} =`, value);
    return Reflect.set(target, prop, value, receiver); // ✅
  }
};

哪些操作只能靠 Proxy 拦截,Object.defineProperty 完全无能为力

如果你还在用 Object.defineProperty 做响应式或校验,遇到以下场景就注定失败:

  • 动态新增属性:obj.newField = 1 —— defineProperty 对它完全没反应
  • 数组索引赋值:arr[0] = 'x' —— 数组长度变化、索引写入均无法捕获
  • in 操作符:'x' in obj —— defineProperty 不提供对应钩子
  • 删除属性:delete obj.x —— 必须用 deleteProperty trap
  • 枚举行为:for...inObject.keys() —— 需要 ownKeys + getOwnPropertyDescriptor

Proxy 共支持 13 种 trap,覆盖所有基本操作;Object.defineProperty 只能监听已有属性的读写。

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

如何用 Proxy + Reflect 实现一个带类型校验的只读代理

“只读”不是只拦 set 就完事。用户还能删属性、加新属性、改原型,甚至冻结对象——这些都得一并堵住:

AIBox 一站式AI创作平台
AIBox 一站式AI创作平台

AIBox365一站式AI创作平台,支持ChatGPT、GPT4、Claue3、Gemini、Midjourney等国内外大模型

下载
  • 必须拦截:setdeletePropertydefinePropertypreventExtensionssetPrototypeOf
  • 类型校验放在 set 里,但赋值动作仍交由 Reflect.set() 执行,否则属性描述符(如 configurable)失效
  • get 中继续用 Reflect.get(),确保访问器、Symbol、继承属性全部正常

示例(简化版):

function typedReadOnly(obj, schema = {}) {
  return new Proxy(obj, {
    set(target, key, value) {
      if (schema[key] && typeof value !== schema[key]) {
        throw new TypeError(`Expected ${schema[key]} for ${key}, got ${typeof value}`);
      }
      return Reflect.set(target, key, value);
    },
    deleteProperty() { throw new Error('Cannot delete property on read-only object'); },
    defineProperty() { throw new Error('Cannot define property on read-only object'); },
    preventExtensions() { return true; },
    setPrototypeOf() { return false; }
  });
}

容易被忽略的边界:Reflect 方法全都不抛异常,且返回值有明确语义

Reflect.deleteProperty(obj, 'x') 返回 true/false,不是抛错;Reflect.has(obj, 'x')'x' in obj 更可靠——它不会意外触发原型上 getter 的副作用。

更关键的是:Reflect.construct() 是唯一能控制 new.target 的方式,想安全继承 ArrayMap 必须用它;Reflect.apply(fn, thisArg, args)fn.apply() 更适合在代理中做函数调用转发。

这些不是“锦上添花”,而是你在写生产级代理时,绕不开的语义细节。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
golang map内存释放
golang map内存释放

本专题整合了golang map内存相关教程,阅读专题下面的文章了解更多相关内容。

77

2025.09.05

golang map相关教程
golang map相关教程

本专题整合了golang map相关教程,阅读专题下面的文章了解更多详细内容。

40

2025.11.16

golang map原理
golang map原理

本专题整合了golang map相关内容,阅读专题下面的文章了解更多详细内容。

67

2025.11.17

java判断map相关教程
java判断map相关教程

本专题整合了java判断map相关教程,阅读专题下面的文章了解更多详细内容。

47

2025.11.27

数据库Delete用法
数据库Delete用法

数据库Delete用法:1、删除单条记录;2、删除多条记录;3、删除所有记录;4、删除特定条件的记录。更多关于数据库Delete的内容,大家可以访问下面的文章。

287

2023.11.13

drop和delete的区别
drop和delete的区别

drop和delete的区别:1、功能与用途;2、操作对象;3、可逆性;4、空间释放;5、执行速度与效率;6、与其他命令的交互;7、影响的持久性;8、语法和执行;9、触发器与约束;10、事务处理。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

222

2023.12.29

Python异步编程与Asyncio高并发应用实践
Python异步编程与Asyncio高并发应用实践

本专题围绕 Python 异步编程模型展开,深入讲解 Asyncio 框架的核心原理与应用实践。内容包括事件循环机制、协程任务调度、异步 IO 处理以及并发任务管理策略。通过构建高并发网络请求与异步数据处理案例,帮助开发者掌握 Python 在高并发场景中的高效开发方法,并提升系统资源利用率与整体运行性能。

37

2026.03.12

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

136

2026.03.11

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

47

2026.03.10

热门下载

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

精品课程

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

共42课时 | 9.6万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.6万人学习

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

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