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;

在这里插入图片描述

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

uniapp 2.0可视化开发工具:提升跨平台应用开发效率的新篇章

摘要 随着移动互联网的迅猛发展,跨平台应用开发成为前端开发者关注的热点。uniapp作为一款优秀的跨平台应用框架,其2.0版本的发布为开发者带来了更多的便利和可能性。其中,可视化开发工具的出现更是为前端开发带来了革命性的变革&#xff0c…

Windows下docker-compose部署DolphinScheduler

参照:快速上手 - Docker部署(Docker) - 《Apache DolphinScheduler v3.1.0 使用手册》 - 书栈网 BookStack 下载源文件 地址:https://dolphinscheduler.apache.org/zh-cn/download/3.2.1 解压到指定目录,进入apache-dolphinscheduler-xxx-…

【Qt 学习笔记】Qt信号和槽的其他说明及Lambda表达式

博客主页:Duck Bro 博客主页系列专栏:Qt 专栏关注博主,后期持续更新系列文章如果有错误感谢请大家批评指出,及时修改感谢大家点赞👍收藏⭐评论✍ Qt信号和槽的其他说明及Lambda表达式 文章编号:Qt 学习笔记…

ctfshow--web入门--文件上传--web168--web170

web168 法一免杀脚本 还是检查&#xff0c;准备上传图片马 我写的是<?php eval($_POST[a]);?> 上传之后没反应 那么查一下&#xff0c;原来是发现对eval,system还有$_POST和$_GET进行过滤,$_REQUEST还可以用 那么再写一个马&#xff08;免杀脚本&#xff09; <?…

ht1622不显示无反应问题解决

如果你正在写ht1622 驱动时&#xff0c;怎么看程序都没问题&#xff0c;抓取波形&#xff0c;示波器分析波形&#xff0c;如果都没有问题&#xff0c;那么很大可能是硬件问题&#xff0c;检测看看 ht1622 RD是不是接地了。 RD 低会进入读取模式&#xff0c;所以不用RD 请将RD悬…

2024年河北省职业院校技能大赛高职组“信息安全管理与评估”赛项样题

培训、环境、资料、考证 公众号&#xff1a;Geek极安云科 网络安全群&#xff1a;775454947 网络系统管理群&#xff1a;223627079 网络建设与运维群&#xff1a;870959784 极安云科专注于技能提升&#xff0c;赋能 2024年广东省高校的技能提升&#xff0c;受赋能的客户院校均…

某次众测的加解密对抗

前言 起源于某次众测中&#xff0c;遇到请求包响应包全密文的情况&#xff0c;最终实现burp中加解密。 用到的工具有 sekiro&#xff08;rpc转发&#xff09;flask&#xff08;autodecoder自定义接口&#xff09;autodecoder&#xff08;burp插件转发&#xff09; debug部分…

<网络> 网络Socket编程基于TCP协议模拟简易网络通信

目录​​​​​​​ 前言&#xff1a; 一、字符串回响 &#xff08;一&#xff09;程序结构 &#xff08;二&#xff09;初始化服务器 &#xff08;三&#xff09;启动服务器 1. 处理连接请求 2. 业务处理 3. 回调函数 &#xff08;四&#xff09;填充server源文件 &…

公司刚招了一个5年测试,竟然连抓包都不会

大家都知道&#xff0c;无论是测试人员还是开发人员&#xff0c;移动端抓包都是必须掌握的关键技能。然而还有人在测试岗位上干了这么久&#xff0c;还是不懂如何进行抓包&#xff01;今天就跟大家分享两款在日常工作中常用的抓包工具&#xff1a;Fiddler和Charles Fiddler和C…

94岁诺奖得主希格斯去世,曾预言「上帝粒子」的存在

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 新建了免费的人工智能中文站https://ai.weoknow.com 新建了收费的人工智能中文站https://ai.hzytsoft.cn/ 更多资源欢迎关注 一位用诗意的语言揭示宇宙秘密的人。 一位 94 岁伟大科学家的逝世&#xff0c;引发了人们广泛…

分布式事务方案与Seata详解

分布式事务与Seata详解 一、分布式事务1.什么是分布式事务2.分布式事务解决方案-2PC3.分布式事务解决方案-3PC4.分布式事务解决方案-TCC5.分布式事务解决方案-XA6.可靠消息最终一致性6.1 本地消息表6.2 事务消息 7.最大努力通知8.SAGA9.分布式事务解决方案思考 二、Seata 简介与…

pytesseract,一个超强的 Python 库!

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 大家好&#xff0c;今天为大家分享一个超强的 Python 库 - pytesseract。 Github地址&#xff1a;https://github.com/madmaze/pytesseract 在当今数字化时代&#xff0c;文字识别技术扮演着越来越重要的角色。…

基于sd的单分支和双分支方案

单分支&#xff1a; 1.ip-adapter 2.photomaker 3.CLE-Diffusion 4.powerpaint 5.videocomposer 6.animateanything 7.pixeldance 8.aniamtediff 双分支&#xff1a; 1.controlnet 2.instanceid 3.brushnet 4.ootdiffusion 5.MagicAnimate 7.animateanyone

《QT实用小工具·十七》密钥生成工具

1、概述 源码放在文章末尾 该项目主要用于生成密钥&#xff0c;下面是demo演示&#xff1a; 项目部分代码如下&#xff1a; #pragma execution_character_set("utf-8")#include "frmmain.h" #include "ui_frmmain.h" #include "qmessag…

qtablewidget 事件过滤器 鼠标事件不生效

1. 创建了一个MouseEventFilter类&#xff0c;它覆盖了eventFilter()方法来拦截鼠标按下事件。然后&#xff0c;我们将这个事件过滤器安装到了QTableWidget上 2.记得注册事件过滤器 3.这里是头文件 看一下就行 4.return true代表事件被处理&#xff0c;不需要再处理&#xff…

深入了解Redis——哨兵机制

三&#xff0c;Redis哨兵机制 Redis的哨兵机制主要是为了提高Redis主从模型下的可用性&#xff0c;能保证主节点异常发生时还能够正常的运作并进行故障转移。哨兵机制为了实现这一点提供了以下这些功能&#xff1a; 节点监控下线判断领导者选举slave选举故障转移 在介绍这些…

目标检测——车牌图像数据集

一、重要性及意义 车牌图像识别的重要性及意义主要体现在以下几个方面&#xff1a; 智能交通管理&#xff1a;车牌图像识别技术是智能交通系统&#xff08;ITS&#xff09;的核心组成部分。通过自动识别车辆车牌&#xff0c;可以实现对交通违章行为的自动记录和处理&#xff…

【数据库】数据库应用系统生命周期

目录 1.为什么提出”软件工程“的思想&#xff1f; 2.为什么提出”瀑布模型“&#xff1f;缺点是什么&#xff1f; 3.为什么提出”快速原型模型“&#xff1f; 4.为什么提出”螺旋模型“&#xff1f; 5.关于数据库的英文缩写。 6.模型设计中的3条设计主线&#xff1a;数…

OpenHarmony分布式软总线API调用测试工具 softbus_tool使用说明

softbus_tool 是 OpenHarmony 分布式软总线 API 调用测试工具&#xff0c;文件结构如下图所示。 softbus_tool 能够将软总线 interfaces 目录下的一些常用接口集中起来&#xff0c;供设备间搭建一些场景时使用&#xff08;比如设备绑定、BR 组网&#xff0c;BLE 组网&#xff…