Web前端—属性描述符

属性描述符

假设有一个对象obj

var obj = {a:1
}

观察这个对象,我们如何来描述属性a

  • 值为1
  • 可以重写
  • 可以遍历
  • 我们可以通过Object.getOwnPropertyDescriptor得到它的属性描述符
var desc = Object.getOwnPropertyDescriptor(obj, 'a');
console.log(desc);

我们会得到一个对象
观察这个对象中的内容

  • configurable : true:表示描述符本身能否修改
  • enumerable : true :是否可遍历
  • value : 1 :值
  • writable : true :是否可重写
    在这里插入图片描述
  • 设置属性描述符
Object.defineProperty(obj, 'a', {value:10,writable:false //表示不可重写
});
console.log(obj.a); // 10
  • :如果修改了configurable的值为false,后续再次修改属性描述符会报错。
Object.defineProperty(obj, 'a', {configurable:false
});
Object.defineProperty(obj, 'a', {value:20,
});
console.log(obj.a);

在这里插入图片描述

  • 但是,如果属性设置了不可重写,后续进行修改,虽然不会报错,但是不会修改成功
Object.defineProperty(obj, 'a', {value:10,writable:false //表示不可重写
});
console.log(obj.a); // 10
obj.a = 20;
console.log(obj.a); // 10

因此,如果属性不能重写,后续修改最好能进行报错,告诉用户哪句话出现了问题。

  • 为了解决上面的问题,Object.defineProperty中有两个函数
    • 读取器 getter
    • 设置器 setter

当读取属性a的值的时候会运行get函数,设置属性a的值的时候会 运行set函数

Object.defineProperty(obj, 'a', {get:function(){console.log("get函数");},set:function(val){console.log("set函数");}
});
obj.a = 20;  // set函数
console.log(obj.a);  // get函数

:这里需要注意一个问题—无限递归问题

  • 如果在get中读取属性,或者在set中设置属性的值,则会出现无限递归问题
Object.defineProperty(obj, 'a', {get:function(){return obj.a;},set:function(val){obj.a = val;}
});
obj.a = 20;
console.log(obj.a);

在这里插入图片描述

  • 使用样例
var internalValue = obj.a;
Object.defineProperty(obj, 'a', {get:function(){console.log("get函数");return internalValue;},set:function(val){console.log("set函数");internalValue = val;return internalValue;}
});
obj.a = 20; // set函数
console.log(obj.a); // get函数 20
  • 因此,假设该属性不能重写,可以在set函数中抛出一个报错信息,提示用户
Object.defineProperty(obj, 'a', {get:function(){console.log('get函数');},set:function(val){throw new Error(`报错信息:该属性不能赋值,你正在给这个属性赋值为${val}`);}
})
console.log(obj.a);
obj.a = 20;

在这里插入图片描述

当然,这里面也会出现问题需要考虑,具体出现的问题具体分析。

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

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

相关文章

安卓逆向 | 某X游戏垂类Web nonce

*本案例仅做分析参考,如有侵权请联系删除 1.逻辑分析 通过XHR断点,然后逐步往上调发现nonce生出处。 在console执行下函数 其中 i,是当前日期和时间的秒级时间戳,并将其向下取整到最接近的整数。 i = ~~(+_.w() / 1e3)w</

设计模式之迭代器模式(上)

迭代器模式 1&#xff09;概述 1.概念 存储多个成员对象&#xff08;元素&#xff09;的类叫聚合类(Aggregate Classes)&#xff0c;对应的对象称为聚合对象。 聚合对象有两个职责&#xff0c;一是存储数据&#xff0c;二是遍历数据。 2.概述 迭代器模式(Iterator Patter…

Go语言不能常量取址!?

题如下图 在软件开发中&#xff0c;常量是一种重要的编程元素&#xff0c;它们在程序中起到固定值的作用被大量使用 Go语言中的常量取址 在 Go 语言中&#xff0c;常量是无法被取址的。这意味着我们不能使用取址操作符 & 来获取常量的地址。例如&#xff1a; const a …

【Java EE】关于Spring MVC 响应

文章目录 &#x1f38d;返回静态页面&#x1f332;RestController 与 Controller 的关联和区别&#x1f334;返回数据 ResponseBody&#x1f38b;返回HTML代码片段&#x1f343;返回JSON&#x1f340;设置状态码&#x1f384;设置Header&#x1f338;设置Content-Type&#x1f…

MySQL高级(索引分类-聚集索引-二级索引)

目录 1、主键索引、唯一索引、常规索引、全文索引 2、 聚集索引、二级索引 3、回表查询 4、通过id查询和通过name查询那个执行效率高&#xff1f; 5、 InnoDB主键索引的 B tree 高度为多高呢&#xff1f; 1、主键索引、唯一索引、常规索引、全文索引 在MySQL数据库&#xff0c…

[【JSON2WEB】 13 基于REST2SQL 和 Amis 的 SQL 查询分析器

【JSON2WEB】01 WEB管理信息系统架构设计 【JSON2WEB】02 JSON2WEB初步UI设计 【JSON2WEB】03 go的模板包html/template的使用 【JSON2WEB】04 amis低代码前端框架介绍 【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成 【JSON2WEB】06 JSON2WEB前端框架搭建 【J…

微信小程序picker设置了系统年度,打开选择年份从1年开始显示

背景&#xff1a;开发微信小程序时&#xff0c;使用了picker组件&#xff0c;设置值为当前系统时间年份&#xff0c;可以正常回显年份。但是打开面板选择年份的时候&#xff0c;默认从一年开始显示的。如下图所示。 原因&#xff1a;因为绑定的年份字段为Number类型。 解决方案…

文心一言 vs. GPT-4: 全面比较

1. 训练数据和预训练 文心一言 训练数据&#xff1a;文心一言是由中国研究人员开发的中文语言模型。它主要在大量古典中文文学作品上进行训练&#xff0c;包括诗歌、散文和历史文本。这些文学作品涵盖了丰富的中文语言和文化&#xff0c;使得文心一言在传统文化方面具有独特优…

React中State管理的4 个关键解决方案

在 React 应用开发中,状态(state)管理是非常重要的一部分。合理地管理状态可以确保组件的行为正确,提高应用的可维护性和性能。然而,在实际使用 React 的 state 时,开发者常常会遇到一些常见的问题和陷阱。 本文将从解决问题的角度,总结 React 中 state 管理的4个关键技巧: 使…

面向对象知识汇总(5)

目录 Day 5问题二十二&#xff1a;抽象类1. 抽象类概念2. 抽象类语法3. 抽象类特性4. 抽象类和普通类的区别 问题二十三&#xff1a;接口1. 接口的概念2. 接口的语法规则3. 接口的使用4. 接口的特性5. 实现多个接口6. 接口间的继承 Day 5 问题二十二&#xff1a;抽象类 1. 抽…

考研总计划篇

政治 九月份开始听徐涛老师的课&#xff0c;只需要听哲学&#xff0c;政治&#xff0c;经济学即可&#xff0c;然后用仓盾小程序刷题&#xff0c;刷题就吃饭的时候刷就是了。 工具书—苏一的提分手册&#xff0c;每天抽一个小时刷刷上面的知识点。 英语&#xff08;现在到九…

12(13)(14)-2(1)-CSS 字体图标+实战:商城首页

个人主页&#xff1a;学习前端的小z 个人专栏&#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结&#xff0c;欢迎大家在评论区交流讨论&#xff01; 文章目录 CSS 字体图标1 字体图标的产生2 字体图标的优点3 字体图标的下载4 字体图标的…

WordPress LayerSlider插件SQL注入漏洞复现(CVE-2024-2879)

0x01 产品简介 WordPress插件LayerSlider是一款可视化网页内容编辑器、图形设计软件和数字视觉效果应用程序,全球活跃安装量超过 1,000,000 次。 0x02 漏洞概述 WordPress LayerSlider插件版本7.9.11 – 7.10.0中,由于对用户提供的参数转义不充分以及缺少wpdb::prepare(),…

【第二十三篇】Burpsuite+SQL注入实现登录绕过等(靶场实战案例)

目录 Where+SQL注入获取隐藏数据SQL注入实现登录绕过Union+SQL注入获取数据库类型和版本Where+SQL注入获取隐藏数据 存在一个业务场景如下 筛选商品时,后端查询语句如下: SELECT * FROM products WHERE category = Gifts AND released = 1只有商品名匹配且该商品已发布(r…

ubuntu系统开机无限循环输入密码后黑屏【以及问题2:ls后桌面有文件但是桌面看不到】的解决方法

问题1&#xff1a;刚进来黑屏&#xff0c;无限循环输入密码后黑屏亮屏&#xff0c;然后又输入密码黑屏亮屏…… 解决方法&#xff1a;卸载重装桌面系统ubuntu-desktop那个。然后用的是在命令行startx可以进入一个新的与图形化界面&#xff0c; 然后进来界面后&#xff0c; 又遇…

使用vue3搭建一个CRM(客户关系管理)系统

目录 1. 需求分析 2. 设计 3. 技术选型 4. 开发环境搭建 5. 前端开发 6. 后端开发 7. 数据库搭建 8. 测试 9. 部署 10. 维护和迭代 总结 搭建一个CRM&#xff08;客户关系管理&#xff09;系统是一个复杂的项目&#xff0c;涉及到需求分析、设计、开发、测试和部署等…

idea中MySQL数据库的配置

在IntelliJ IDEA中配置数据库可以通过以下步骤进行&#xff1a; 打开IntelliJ IDEA&#xff0c;在菜单栏中选择"View" -> "Tool Windows" -> "Database"&#xff0c;打开Database工具窗口。 在Database工具窗口上方&#xff0c;点击"…

程序猿之路:从兴趣到职业的蜕变

水篇&#xff08;程序猿之路&#xff09; 如果硬要说自己为什么做程序员的话&#xff0c;我有故事&#xff0c;你有酒&#xff08;留言&#xff09;吗&#xff1f; 目录 记录工作实践与项目复盘 技术笔记巩固知识要点 职场感悟心得 曾经的我&#xff0c;对计算机世界充满好奇…

2024全国现代流通经济创新大会暨城郊大仓基地高质量建设论坛日程发布

2024年4月19日 中国平谷 建设城郊大仓基地 创新现代流通经济 一、大会开幕式&主论坛 时间&#xff1a;9:00-12:00 地点&#xff1a;博物馆一楼 报告厅 主持人&#xff1a;中国商业联合会商贸物流与供应链分会会长干为 08:30-09:00 大会入场&宣传片视频 09:00-0…