Object.defineProperty到底有啥用

news2024/11/23 19:19:22

Object.defineProperty

Object.defineproperty 的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性

使用Object.defineProperty之前

number和person之间并无关联
在这里插入图片描述

使用Object.defineProperty之后

person和number之间有了关联;修改person.age之后,number发生了变化;修改number之后,person.age变化了
在这里插入图片描述
*get:当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值

set:当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值*

对象的属性描述符

①对象除了我们最初理解的key,value键值对形式,还有其他的属性描述符,如下:
②writable 对象的某个value能否更改;
③enumerable 能够被列出;
④configurable 能够被删除
对象不只是有value属性描述符

使用普通方法创建对象之后,他的属性描述符writable enumerable configurable默认都是true

let user = {
  name: "John"
};
//获取user对象的name属性的描述符
let descriptor = Object.getOwnPropertyDescriptor(user, 'name');

alert( JSON.stringify(descriptor, null, 2 ) );
/* 属性描述符:
{
  "value": "John",
  "writable": true,
  "enumerable": true,
  "configurable": true
}
*/

如果使用Object.defineProperty(obj, propertyName, descriptor)创建对象的某一属性,那么上面的三个属性描述符默认是false
obj是对象;propertyName是属性名;descriptor是属性描述符对象

let user = {};

Object.defineProperty(user, "name", {
  value: "John"
});

let descriptor = Object.getOwnPropertyDescriptor(user, 'name');

alert( JSON.stringify(descriptor, null, 2 ) );
/*
{
  "value": "John",
  "writable": false,
  "enumerable": false,
  "configurable": false
}
 */

Object.defineProperties一次定义多个属性

Object.defineProperties(user, {
  name: { value: "John", writable: false },
  surname: { value: "Smith", writable: false },
  // ...
});

对象的另外一种属性:访问器属性 getter setter

①对象属性包括数据属性(常规的)和访问器属性
②访问器属性有getter和setter两个函数组成,可以用来随时改变对象中的属性值;
③当读取对象中某一个属性的时候,触发getter函数
④当修改对象中的某一个属性的时候,触发setter函数
⑤访问器属性对内表现为getter、setter函数,对外仍然表现为某一个数据属性
访问器属性讲解参考

现在我们想添加一个 fullName 属性,该属性值应该为 “John Smith”。当然,我们不想复制粘贴已有的信息,因此我们可以使用访问器来实现:

let user = {
  name: "John",
  surname: "Smith",

  get fullName() {
    return `${this.name} ${this.surname}`;
  }
};

alert(user.fullName); // John Smith

通过为 user.fullName 添加一个 setter 来修改属性值

let user = {
  name: "John",
  surname: "Smith",

  get fullName() {
    return `${this.name} ${this.surname}`;
  },

  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  }
};

// set fullName 将以给定值执行
user.fullName = "Alice Cooper";

alert(user.name); // Alice
alert(user.surname); // Cooper

访问器描述符

对于访问器属性,没有 value 和 writable,但是有 get 和 set 函数。
所以访问器描述符可能有:
get —— 一个没有参数的函数,在读取属性时工作,
set —— 带有一个参数的函数,当属性被设置时调用,
enumerable —— 与数据属性的相同,
configurable —— 与数据属性的相同。

请注意,一个属性要么是访问器(具有 get/set 方法),要么是数据属性(具有 value),但不能两者都是。
如果我们试图在同一个描述符中同时提供 get 和 value,则会出现错误:

// Error: Invalid property descriptor.
Object.defineProperty({}, 'prop', {
  get() {
    return 1
  },

  value: 2
});

总结

在这里插入图片描述

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

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

相关文章

1164 Good in C(38行代码+超详细注释)

分数 20 全屏浏览题目 切换布局 作者 陈越 单位 浙江大学 When your interviewer asks you to write "Hello World" using C, can you do as the following figure shows? Input Specification: Each input file contains one test case. For each case, the …

Ceph 分布式存储

Ceph概述 存储基础 单机存储设备 ●DAS(直接附加存储,是直接接到计算机的主板总线上去的存储) IDE、SATA、SCSI、SAS、USB 接口的磁盘 所谓接口就是一种存储设备驱动下的磁盘设备,提供块级别的存储 ●NAS(网络附加存…

jwt----介绍,原理

token:服务的生成的加密字符串,如果存在客户端浏览器上,就叫cookie -三部分:头,荷载,签名 -签发:登录成功,签发 -认证:认证类中认证 # jwt&…

火伞云全球节点分布国家及城市列表

火伞云融合CDN划分为中国境内和中国境外两个服务区域。 中国境内区域为中国大陆全地区统一计费(不含港澳台),全球用户访问均会调度至中国内地加速节点进行服务。 中国境外区域,按CDN 节点服务器所在地区,划分为北美地…

uni-app使用echarts绘制数据可视化图

先打开项目 然后选择 使用命令行窗口打开所在目录(U) 在弹出的终端中输入指令来引入依赖 npm install echarts然后 我们 打开echarts的官网 点击这里这个 示例 找一个自己喜欢的案例点进去 我这里就用一个最简单的吧 代码看着不会乱 将他这个 option中的内容复制出来 然后…

重塑未来:科技创新驱动社会变革

科技创新驱动社会变革 前言正文一、人工智能(AI):智能技术的崛起二、区块链技术:去中心化的数字经济三、量子计算:开启未来的大门四、生物技术:拓展医学与农业的边界 总结 前言 近年来,科技领域…

Python开发工具PyCharm入门指南 - 如何创建密码短语生成器(下)

PyCharm是一种Python IDE,其带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具。此外,该IDE提供了一些高级功能,以用于Django框架下的专业Web开发。 PyCharm 最新版下载 在上篇文章中,我们学习了密码短语、密码短语…

统信UOS系统开发笔记(二):国产统信UOS系统搭建Qt开发环境安装Qt5.12

若该文为原创文章,转载请注明原文出处 本文章博客地址:https://hpzwl.blog.csdn.net/article/details/130984263 红胖子(红模仿)的博文大全:开发技术集合(包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软…

得物人事系统时间轴设计的演化历程

1 什么是时间轴 ~(以上图片出自电影《星际穿越》)~ 如果你看过《星际穿越》,应该对这一幕印象深刻,女儿墨菲所处的房间,按照时间分为了无数个三维空间实体。三维空间加时间组合成四维空间,即时空。 时间轴…

奇怪,能ping通怎么还是上不了网?

我的网工朋友大家好啊 一般如果遇到没法上网的问题,你会怎么办。 可能会尝试去使用ping命令来测试一下网络是不是正常,对吧? 但是有时候会出现,ip能ping通,但是就是无法上网,应该大部分网工都遇到过这种…

虚实连接:惯性动作捕捉系统系列产品多领域广泛应用

近年来,将人体数字化融入虚拟世界已经成为一股浪潮,特别聚焦于姿态动作捕捉和人体运动学分析。此时建立准确的虚拟与现实数字模型,并研究运动参数和力学参数的关联至关重要。同时可推动虚拟现实和人机交互的发展,拓展医疗康复、体…

【Atlas200】继承MxBase类自制插件(C++),以官方例程为例

目录 MindX SDK简介插件的Buffer与Metadata自定义插件Init初始化接口DeInit资源释放接口Process插件入口DefineProperties接口DefineInputPorts接口MindX SDK简介 MindX是一款针对昇腾系列AI芯片的软件开发工具包(SDK),它提供了一系列的API和工具,帮助开发者对昇腾系列AI芯…

1、 快速入门

0、回顾jdbc操作数据库 在MySQL数据库创建一数据库实例mybatis,在其创建一张表 CREATE TABLE employee(id INT(11) PRIMARY KEY AUTO_INCREMENT,last_name VARCHAR(255),gender CHAR(1),email VARCHAR(255) ); -- 再插进一条随意数据,用于测试 INSERT …

day5 -- 函数

学习内容 MySQL支持何种函数,以及如何使用这些函数 brief 大多数SQL实现支持以下类型的函数: 用于处理文本串(如删除或填充值,转换值为大写或小写)的文本函数用于在数值数据上进行算术操作(如返回绝对值…

Linux 6.2 系列生命周期已结束

导读Linux 6.2 系列内核已结束生命周期,在 kernel.org 上被标记为 EOL ,这意味着该版本不会再有任何新功能、Bug 修复或安全补丁。 Linux 6.2 于 2023 年 2 月底正式发布,是一个非 LTS 版本,只有为期三个月的支持,在维…

Pixhawk无人机-ArduPilot 软件SITL仿真模拟飞行(SITL+Mission Planner结合)

本文的目的是将SITL仿真结合Missionplanner地面站,之后再探索SITL仿真结合QGC地面站。 Pixhawk无人机扩展教程(7)—SITLMP/QGC运行教程中指出,QGC地面站是安装在与SITL仿真软件一起的笔记本电脑上的,而MP地面站是安装在另外一台笔记本电脑上…

分布式锁的应用场景与分布式锁实现(二):基于Redis实现分布式锁

分布式锁的应用场景与分布式锁实现(一):传统锁处理并发及传统锁的问题 基于Redis实现分布式锁 所有代码已同步到GitCode:https://gitcode.net/ruozhuliufeng/distributed-project.git 基本实现 ​ 借助Redis中的命令setnx(key&a…

ES6-ES13学习笔记(5.0)

ES2022的函数 //findLast findLastIndex() ES2022 发现在电脑自带的联想浏览器不支持此函数,还报错了 对于ECMA的支持还和浏览器有关以及浏览器版本有关,然后我使用Google浏览器就可以正常使用, 1.扩展运算符:三个点... ..…

第一行代码 第十三章 高级技巧

第13章 高级技巧 全局获取Context的技巧 回想这么久以来我们所学的内容,你会发现有很多地方都需要用到Context,弹出Toast的时候需要,启动活动的时候需要,发送广播的时候需要,操作数据库的时候需要,使用通…