复习js的Object.defineProperty()

news2024/11/17 1:24:29

今天在看尚硅谷的Vue2时,讲到了Object.defineProperty()方法,有点忘了,所以找资料复习了一下。

总说

Object.defineProperty()是一种用于定义对象属性的JavaScript方法,它允许开发人员精确控制一个属性的行为,并可以对属性进行监视和响应。该方法接受三个参数

obj:要定义属性的对象。
prop:要定义或修改的属性的名称。
descriptor:将被定义或修改的属性描述符。
"属性描述符(descriptor)是一个包含以下可选属性的对象:

  • configurable: 当且仅当该属性的 configurable 键值为 true 时,该属性的描述符才能够被改变,同时该属性也能从对应的对象上被删除;默认为false。(简单理解就是用defineProperty()添加的属性默认是不可删除的,要想删,得设成true)
  • enumerable: 控制属性是否被枚举,默认为false。
  • value: 属性值,默认为undefined。
  • writable:默认为false, 表示只读。定义为true时,使用defineProperty()所以定义的属性的值才能被修改
  • get: 在读取属性时调用的函数,默认为undefined。
  • set: 在写入属性时调用的函数,默认为undefined。
  • Object.defineProperty()方法在许多高级JavaScript库和框架中被广泛使用,例如Vue.js中就用该方法实现了响应式数据、计算属性和监听器等功能。

 定义对象时直接定义的属性是可以随意修改和删除的,但用defineProperty()定义的属性默认是不可枚举、不可修改、不可删除的,需要设置相应的属性才可以。

例子:实例1:

  <script>
      //这是定义对象时直接定义属性
        let person = {
            name:'张三',
            sex:'男'
            //age:18 这样添加的是可以参与遍历的
        }
        Object.defineProperty(person,'age',{ value:18})//追加属性
        console.log(person)
		//keys()方法输出一个对象的所有属性(即key)
        console.log(Object.keys(person))//defineProperty添加的age属性默认不参与遍历的,即是不可枚举的。
    </script>

打开谷歌的控制台,查看输出:

 发现age没输出,因为defineProperty添加的age属性默认不参与遍历的,即是不可枚举的

下面对属性描述符的各个属性进行例子介绍。

enumerable属性

开启enumerable属性,即设置为true,使age属性能参与遍历

    <script>
        let person = {
            name:'张三',
            sex:'男'
        }
        Object.defineProperty(person,'age',{
            value:18,
//设置为true了
            enumerable:true
        })
        console.log(person)
//defineProperty添加的age属性默认不参与遍历的,即是不可枚举的。
//要想能遍历,需要设置一个属性enumerable:true
        console.log(Object.keys(person))
        
    </script>

查看谷歌控制台输出:发现age也输出了

 

writable属性

defineProperty添加的age属性默认是不可修改的,需要将writable设为true才可以修改

  <script>
        let person = {
            name:'张三',
            sex:'男'
        }
        Object.defineProperty(person,'age',{
            value:18,
            enumerable:true,
            writable:true
        })
    </script>

 

configurable属性

尝试在谷歌控制台删除age属性,发现失败,如下图:

 

用defineProperty()添加的age属性默认是不可删除的,需要将configurable设为true才可以删除

  <script>
        let person = {
            name:'张三',
            sex:'男'
        }
        Object.defineProperty(person,'age',{
            value:18,
            enumerable:true,//控制属性是否可用枚举(遍历),默认false
            writable:true,//控制属性是否可被修改,默认false
            configurable:true//控制属性是否可被删除,默认false
        })
       
    </script>

设置configurable为true后,age属性可以被删除

 

get属性

 <script>
        let number = 18
        let person = {
            name:'张三',
            sex:'男'
        }
        Object.defineProperty(person,'age',{
            //get本质是属性,function是他的值,这一对key-value常称为getter
           //当有人读取person的age属性时,get函数(即getter)就会被调用,
//且返回值就是age的值
             //  get:function () {
           //      return number;
           //  }
            //简写为
            get(){
                return number
            }
        })
    </script>

set属性

    <script>
        let number = 18
        let person = {
            name:'张三',
            sex:'男'
        }
        Object.defineProperty(person,'age',{
            //get是属性,右边的function是他的值,这一对key-value常称为getter
           //当有人读取person的age属性时,get函数(即getter)就会被调用,且返回值就是age的值
           //  get:function () {
           //      return number;
           //  }
            //简写为
            get(){
                return number
            },
       
            // set:function (value){
            //     console.log('有人修改了age属性,且值为',value)
            //     number = value//因为getter以number的值充当年龄,所以,必须修改number变量,才能实现修改age的效果
            // }
            //简写。当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
            set(value){ //这个value变量随意起名,不是特定的,起x,a,bbb也行
                number = value
            }
            }
        })
    </script>

感谢尚硅谷Vue教学视频

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

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

相关文章

【MySQL】库表的基本操作

文章目录 数据库的基本操作增查删改切入查看当前使用数据库 数据表的基本操作增查所有表查指定表查表字段信息删表改表名改字段名改字段属性增字段删字段 数据表的约束主键约束(PRIMARY KEY)非空约束(NOT NULL)默认值约束(DEFAULT)唯一性约束(UNIQUE)外键约束(FOREIGN KEY)删除…

VSCode 配置 C++ 环境

文章目录 VSCode 配置 C 环境1. 配置 C 编译器1.1 下载 MinGW1.2 添加环境变量1.3 测试 2. 配置编辑器 VSCode2.1 下载 VSCode2.2 安装插件2.3 运行代码 3. 优化Reference VSCode 配置 C 环境 VSCode&#xff08;Visual Studio Code&#xff09;是一款轻量级的代码编辑器&…

Linux系统之部署Node.js环境

Linux系统之部署Node.js环境 一、Node.js介绍1.1 Node.js简介1.2 npm简介1.3 Node.js官网 二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍 三、部署Node.js环境3.1 下载Node.js安装包3.2 解压Node.js安装包3.3 复制二进制文件3.4 配置环境变量3.5 检查node及npm版本 四、NP…

EXCEL的自定义格式,比如 @_ ,一个我很少用的功能的简单总结

目录 前言 1 入口&#xff1a; 2 有用的一些功能 2.1 可以自动在 你输入的字符串前后加 预设内容 2.1.1 具体见下面 2.1.2 对比EXCEL得常用拖动功能 2.2 设置填充下划线 2.2.1 效果如下 2.2.2 问题 2.2.3 下划线的显示问题 2.3 比如 #.## 2.4 比如 000.000 2.5 比…

自动化测试webdriver常用API总结

目录 前言&#xff1a; 1. selenium的简单介绍 2. selnium的下载 3. WebDriver常用API 前言&#xff1a; WebDriver 是一个自动化测试工具&#xff0c;主要用于模拟浏览器行为&#xff0c;实现自动化测试。下面是一些 WebDriver 常用 API 总结&#xff1a; 1. selenium的…

STM32--ESP8266物联网WIFI模块(贝壳物联)--远程无线控制点灯

本文适用于STM32F103C8T6等MCU&#xff0c;其他MCU可以移植&#xff0c;完整资源见文末链接 一、简介 随着移动物联网的发展&#xff0c;各场景下对于物联控制、数据上传、远程控制的诉求也越来越多&#xff0c;基于此乐鑫科技推出了便宜好用性价比极高的wifi物联模块——ESP…

CentOS 7.6安装 MongoDB 5.0.2

1、选择下载地址 进入下载官网 https://www.mongodb.com/try/download/community 选择右侧MongoDB Community Server Version&#xff1a;5.0.2&#xff08;current&#xff09; Platform&#xff1a;RedHat / CentOS 7.0 Package&#xff1a;tgz 点击Copy复制 安装位置&am…

爆肝总结,软件测试-常见并发问题+解决方案,测试进阶...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 并发测试的定义 …

LVS负载均衡--NET模式

目录 企业群集应用概率 群集的含义 问题 根据群集所针对的目标差异&#xff0c;可分为三种类型 负载均衡群集(Load Balance Cluster) 高可用群集(High Availability Cluster) 高性能运算群集(High Performance Computer Cluster) 负载均衡群集架构 负载均衡的结构 LV…

XuperChain搭建+报错+注意事项

安装依赖 golang 这里安装的是15-17版本 wget -c https://dl.google.com/go/go1.15.2.linux-amd64.tar.gz -O - | sudo tar -xz -C /usr/local 添加环境变量 这个可以通过添加下面的行到/etc/profile文件(系统范围内安装)或者$HOME/.profile文件(当前用户安装 vim /etc…

论文笔记--GPT-4 Technical Report

论文笔记--GPT-4 Technical Report 1. 报告简介2. 报告概括3 报告重点内容3.1 Predictable Scaling3.2 Capabilities3.3 limitations3.3 Risks & mitigations 4. 报告总结5. 报告传送门6. References 1. 报告简介 标题&#xff1a;GPT-4 Technical Report作者&#xff1a;…

机器学习——单变量线性回归、梯度下降

文章目录 一、机器学习的分类二、线型回归Linear regression&#xff08;单变量线性回归&#xff09;三、代价函数3.1 建模误差3.2 平方误差代价函数 Squared error cost function3.3 梯度下降3.4 梯度下降与线性回归相结合 一、机器学习的分类 监督学习&#xff1a;学习数据带…

算法模板(3):搜索(6):做题积累

算法模板&#xff08;3&#xff09;&#xff1a;搜索&#xff08;6&#xff09;&#xff1a;做题积累 一、DFS 1. 1113. 红与黑 有一间长方形的房子&#xff0c;地上铺了红色、黑色两种颜色的正方形瓷砖。你站在其中一块黑色的瓷砖上&#xff0c;只能向相邻&#xff08;上下…

【剑指offer专项突破版】链表篇——“C“

文章目录 前言一.删除链表的倒数第 n 个结点题目分析思路分析细节分析步骤代码 二.链表中环的入口节点题目分析思路分析写法①代码写法②代码: 三.两个链表的第一个重合节点题目分析思路分析代码 四.反转链表题目分析思路分析法①代码法②代码法③代码 五.链表中的两数相加题目…

西南交通大学智能监测 培训课程练习4

2023.056.07和09培训 项目实战 目录 一、infracore&#xff08;基础核心层&#xff09; 1.1database 1.2config 1.3util 二、业务领域模块 2.1structure模块 2.1.1domain层 2.1.2application层 2.1.3adapter层 2.2sensor模块 2.2.1domian层 2.2.2application层 2.2.…

一文搞懂什么是Docker

一、什么是Docker 微服务虽然具备各种各样的优势&#xff0c;但服务的拆分通用给部署带来了很大的麻烦。 分布式系统中&#xff0c;依赖的组件非常多&#xff0c;不同组件之间部署时往往会产生一些冲突。在数百上千台服务中重复部署&#xff0c;环境不一定一致&#xff0c;会遇…

Java ~ Reference ~ Finalizer【总结】

前言 文章 相关系列&#xff1a;《Java ~ Reference【目录】》&#xff08;持续更新&#xff09;相关系列&#xff1a;《Java ~ Reference ~ Finalizer【源码】》&#xff08;学习过程/多有漏误/仅作参考/不再更新&#xff09;相关系列&#xff1a;《Java ~ Reference ~ Final…

基于Python的接口自动化-Requests模块

目录 引言 一、模块说明 二、Requests模块快速入门 1 发送简单的请求 2 发送带参数的请求 3 定制header头和cookie 4 响应内容 5 发送post请求 6 超时和代理 三、Requests实际应用 引言 在使用Python进行接口自动化测试时&#xff0c;实现接口请求…

2023春期末考试选择题R2-9AVL树插入调整详解

题目&#xff1a; 将 8, 9, 7, 2, 3, 5, 6, 4 顺序插入一棵初始为空的AVL树。下列句子中哪句是错的&#xff1f; A. 4 和 6 是兄弟 B. 5 是 8 的父结点 C. 7 是根结点 D. 3 和 8 是兄弟 解题要点&#xff1a; 需要对AVL树的4种旋转方式熟悉。 AVL旋转过程&#xff1a; 根据…