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免费学习笔记(深入)”;

Favird No-Code Tools
Favird No-Code Tools

无代码工具的聚合器

下载

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

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

  • 必须拦截: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

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

豆包大模型
豆包大模型

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

通义千问
通义千问

阿里巴巴推出的全能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

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

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

76

2026.03.11

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

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

38

2026.03.10

Kotlin Android模块化架构与组件化开发实践
Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开,重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析,帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系,提升团队协作效率与项目迭代速度。

83

2026.03.09

热门下载

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

精品课程

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

共42课时 | 9.5万人学习

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号