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

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

小婷同学_7263

小婷同学_7263

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

|

394人浏览过

|

来源于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] = value 或 target[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...in、Object.keys() —— 需要 ownKeys + getOwnPropertyDescriptor

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

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

check-vue-style
check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示,适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

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

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

  • 必须拦截:set、deleteProperty、defineProperty、preventExtensions、setPrototypeOf
  • 类型校验放在 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 的方式,想安全继承 Array 或 Map 必须用它;Reflect.apply(fn, thisArg, args) 比 fn.apply() 更适合在代理中做函数调用转发。

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

热门AI工具

更多
WorkBuddy

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

LibLibAI
LibLibAI Hot

一款AI视频创作工具,主要用于国内领先的AI创意平台,以海量模型、低门槛操作与“创作-分享-商业化”生态,让小白与专业创作者都能高效实现图文乃至视频创意表达,适合需要提升相关任务效率的用户。

豆包大模型

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

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

DeepSeek

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

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

相关专题

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

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

430

2025.09.05

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

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

323

2025.11.16

golang map原理
golang map原理

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

473

2025.11.17

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

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

243

2025.11.27

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

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

2451

2023.11.13

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

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

765

2023.12.29

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

80

2026.09.23

Buffalo框架路由与请求处理实操指南
Buffalo框架路由与请求处理实操指南

本专题讲解Buffalo框架路由与请求处理机制,涵盖路由注册与分组、资源路由、Handler编写规范、Context上下文方法、参数绑定、中间件编写挂载、Session与Cookie读写、Flash消息及错误页面定制方法。

20

2026.09.23

Buffalo框架零基础入门教程
Buffalo框架零基础入门教程

本专题整理Buffalo框架入门内容,涵盖Go环境准备、buffalo CLI安装、新项目生成、目录结构说明、dev热加载启动、数据库连接配置与常见报错排查,帮助新手按约定优于配置的思路跑通第一个Buffalo框架应用。

20

2026.09.23

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 16.8万人学习

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

共26课时 | 2.4万人学习

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

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