[JS] Reflect的基本使用

Reflect的作用

一开始学习Reflect的时候其实觉得很迷惑,感觉通过Reflect操作Proxy对象或者Object对象总有一种多此一举的感觉。

为什么要使用Reflect操作对象,而不是直接在Proxy和Object上做操作呢?

原因之一是:Proxy和Object相关的API和操作方式在早期设计得不合理,不规范。但是Proxy和Object又是属于比较底层的东西,破坏性的改动会影响到非常多的现有代码。Reflect的提出就是为了解决这个问题,提供了一套现代的、规范的API来操作对象。

Reflect的优点可以由下面几点体现出来:

  1. 在对象上定义属性失败时:Object.defineProperty(obj, name, desc)直接抛出异常,而Reflect.defineProperty(obj, name, desc)则是返回false

  2. 将部分命令式的Object操作规范化为函数行为:

    • name in obj变为:Reflect.has(obj, name)
    • delete obj[name]变为:Reflect.deleteProperty(obj, name)
  3. Reflect简化了一些操作:

    // 老写法
    Function.prototype.apply.call(Math.floor, undefined, [1.75]) // 1// 新写法
    Reflect.apply(Math.floor, undefined, [1.75]) // 1
    

静态方法

  • 调用函数:Reflect.apply(target, thisArg, args)

  • 调用构造函数:Reflect.construct(target, args)

  • 读属性:Reflect.get(target, name, receiver)

  • 写属性:Reflect.set(target, name, value, receiver)

  • 定义属性:Reflect.defineProperty(target, name, desc)

  • 删除属性:Reflect.deleteProperty(target, name)

  • 查询属性是否存在:Reflect.has(target, name)

  • 对象所有属性:Reflect.ownKeys(target)

    等于Object.getOwnPropertyNamesObject.getOwnPropertySymbols

  • 对象是否可扩展:Reflect.isExtensible(target)

  • 让一个对象不可扩展:Reflect.preventExtensions(target)

  • 获取属性的描述对象:Reflect.getOwnPropertyDescriptor(target, name)

  • 获取对象的原型对象:Reflect.getPrototypeOf(target)

  • 设置对象的原型对象:Reflect.setPrototypeOf(target, prototype)

使用Proxy实现观察者模式

// 创建一个集合来保存观察者函数
const observers = new Set();// 函数:添加新的观察者函数到观察者集合中
function observe(fn){observers.add(fn);
}// 函数:创建一个可观察的对象
function observable(target){// 返回一个代理来拦截对目标对象的修改return new Proxy(target, {set(target, name, value, receiver){// 设置目标对象上的属性const result = Reflect.set(target, name, value, receiver);// 通知所有观察者函数属性的变化notify();return result;}});
}// 函数:通知所有观察者函数属性的变化
function notify(){// 调用观察者集合中的每一个观察者函数observers.forEach(fn => fn());
}// =================================================================
// 测试部分
// 创建一个包含count属性的可观察对象
let state = observable({count: 1,
});// 添加一个观察者函数,每次state的count属性更新时,都会在控制台输出日志
observe(() => {console.log('state update: ', state.count);
});// 多次递增state的count属性
state.count++;
state.count++;
state.count++;

输出结果

state update:  2
state update:  3
state update:  4

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/742661.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Bootstrap图片样式使用方法

在Bootstrap中自带了几种图片样式,能够让你很快地对其进行使用,这几种样式使用起来相当简单,让我们一起来看看怎么快速调用Bootstrap图片样式。Bootstrap图片圆角样式 在现今的网站建设中,由于扁平化设计的趋势,我们经常会用用到一些CSS3的特性,例如圆角、渐变、阴影等。…

SQL中“ ` ”的作用是什么?

避免和 mysql 的本身的关键字 冲突 所以 用这个符号括起来 虽然有时候不影响 查询 但是最好是要 加上的

《三体开源传》第二章 科技图谱

科技树?汪淼大脑中突然闪过这个概念。哦,不对,应该是科技图谱,图中交织的连线的复杂度已经远远超过树形结构所能描述的单一路径依赖关系,甚至还出现了环形结构和复杂的社群聚集。科技树:科技树是一种结构图,它将技术按照发展顺序排列成树状,展示从基础技术到高级应用的…

Graphrag: Hello World !

这两天抽空玩了一把 Graphrag, 记录一下测试步骤。先决条件: Python 3.10-3.12备注: 以下所有脚本都在 PowerShell环境下运行 1. 首先安装一下 graphrag python包 pip install --trusted-host https://mirrors.huaweicloud.com -i https://mirrors.huaweicloud.com/repository…

R语言软件套保期限GARCH、VAR、OLS回归模型对沪深300金融数据可视化分析

全文链接:https://tecdat.cn/?p=34670 原文出处:拓端数据部落公众号 金融市场的波动性一直是投资者和决策者关注的焦点之一。为了应对市场波动的风险,套保成为了一种重要的金融手段。在这个背景下,使用R语言软件中的GARCH VAR模型对沪深300金融数据进行分析,可以帮助我们更…

【视频讲解】Python比赛LightGBM、XGBoost+GPU和CatBoost预测学生在游戏学习过程表现|数据代码分享

全文链接:https://tecdat.cn/?p=36990原文出处:拓端数据部落公众号分析师:Qi Zhang背景基于游戏进行学习能让学校变得有趣,这种教育方法能让学生在游戏中学习,使其变得有趣和充满活力。尽管基于游戏的学习正在越来越多的教育环境中使用,但能用应用数据科学和学习分析原理…

excel单元格设置为文本为何还要双击

excel单元格设置为文本时为何还要双击才有效? 我选定一行,用右键设置为文本,为何还要单个逐一双击才有效,否则选定求和时(包含其中一个单元格),仍视为数值。而逐一双击太麻烦,怎么解决? 因为这是excel默认设置,如想要不单个操作,可使用分列的方式来批量处理。 具体操…

Interceptor 拦截器

1、拦截器的介绍拦截器使用场景:登录验证:对于需要登录才能访问的网址,使用拦截器可以判断用户是否已登录,如果未登录则跳转到登录页面。 权限校验:根据用户权限对部分网址进行访问控制,拒绝未经授权的用户访问。 请求日志:记录请求信息,例如请求地址、请求参数、请求时…

bootstrap-datetimepicker 项目

项目 此项目是bootstrap-datetimepicker 项目 的一个分支,原项目不支持 Time 选择。其它部分也进行了改进、增强,例如load 过程增加了对 ISO-8601 日期格式的支持。文档是拷贝/粘贴字原项目的文档,并且加入了更多细节说明。 别犹豫了,下载下来试试吧 ! 下载 ZIP 包此地址可…

TLScanary:Pwn中的利器

TLScanary:Pwn中的利器 引言:什么是TLScanary?在二进制漏洞利用(Pwn)领域,攻击者面临着层层防护措施的挑战。在安全竞赛(如CTF)和实际漏洞利用中,TLS(线程本地存储)和堆栈保护(stack canary)是常见的防护技术。TLScanary应运而生,它结合了TLS协议与堆栈保护技术,…

JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

转载:http://www.cnblogs.com/landeanfen/p/5821192.html#_label2阅读目录一、x-editable组件介绍 二、bootstrapTable行内编辑初始方案 三、bootstrapTable行内编辑最终方案1、文本框 2、时间选择框 3、下拉框 4、复选框 5、“阴魂不散”的select2四、总结 正文 前言:之前介…