深入解析JavaScript 中的 Object.defineProperty() 与 Object.defineProperties() 方法

目录

  • 前言
  • 1. Object.defineProperty()
  • 2. Object.defineProperties()

前言

写在前面,基本的功能与差异如下:

  • Object.defineProperty()
    定义单个属性,接受三个参数(对象、属性名、描述符)

  • Object.defineProperties()
    定义多个属性,接受两个参数(对象、包含多个描述符的对象)

1. Object.defineProperty()

Object.defineProperty() 是一个用于定义对象属性的静态方法,允许你精确地添加或修改对象的属性,包括它们的特性,如可写性、可枚举性和可配置性

基本的语法如下:

Object.defineProperty(obj, prop, descriptor)

属性如下:

  • obj:要在其上定义属性的对象
  • prop:要定义或修改的属性的名称
  • descriptor:描述符对象,定义属性的特性

对于表述的对象有很多种用法,具体如下:

属性描述
value属性的值(默认为 undefined)
writable如果设置为 true,则属性值可以被修改;默认为 false
enumerable如果设置为 true,则属性会出现在对象的枚举属性中;默认为 false
configurable如果设置为 true,则可以删除属性或修改其特性;默认为 false

Demo如下:

// 创建一个对象
const person = {};// 使用 Object.defineProperty() 添加一个属性
Object.defineProperty(person, 'name', {value: '码农研究僧',         // 属性值writable: true,         // 允许修改enumerable: true,       // 可以被枚举configurable: true      // 可以被删除或修改特性
});// 输出对象属性
console.log(person.name); // 码农研究僧// 修改属性值
person.name = '码农';
console.log(person.name); // 码农// 删除属性
delete person.name;
console.log(person.name); // undefined// 试图修改一个不可写的属性
Object.defineProperty(person, 'age', {value: 30,writable: false,        // 不可修改
});// 尝试修改不可写的属性
person.age = 25;          // 失败,age 仍然是 30
console.log(person.age);  // 30

截图如下:

在这里插入图片描述

2. Object.defineProperties()

Object.defineProperties() 方法与 Object.defineProperty() 类似,但它允许一次性定义多个属性

基本语法如下:

Object.defineProperties(obj, props)
  • obj: 要在其上定义属性的对象
  • props:一个对象,其中每个属性对应于要定义的属性的描述符

Demo如下

// 创建一个对象
const car = {};// 使用 Object.defineProperties() 添加多个属性
Object.defineProperties(car, {make: {value: '码农',writable: true,enumerable: true,configurable: true},model: {value: '研究僧',writable: false, // 不可修改enumerable: true,configurable: false // 不可删除},year: {value: 2020,writable: true,enumerable: true,configurable: true}
});// 输出对象属性
console.log(car.make); // 码农
console.log(car.model); // 研究僧
console.log(car.year); // 2020// 修改属性值
car.make = '测试1';
console.log(car.make); // 测试1// 尝试修改不可写的属性
car.model = '测试2'; // 失败
console.log(car.model); // 研究僧// 尝试删除不可配置的属性
delete car.model; // 失败
console.log(car.model); // 研究僧

截图如下:

在这里插入图片描述

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

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

相关文章

CAN物理层(ISO 11898-2 2024)

一、说明 CAN(Controller area network)中文名称是控制器局域网,是用于解决汽车众多控制部件之间的数据交换而开发的一种串行数据通信总线,可以使用双绞线来传输信号,由德国博世公司在20世纪80年代专门为汽车行业开发。 ISO 11898-2 2024版相对于2016版,主要由以下更新…

VQGAN(2021-06:Taming Transformers for High-Resolution Image Synthesis)

论文:Taming Transformers for High-Resolution Image Synthesis 1. 背景介绍 2022年中旬,以扩散模型为核心的图像生成模型将AI绘画带入了大众的视野。实际上,在更早的一年之前,就有了一个能根据文字生成高清图片的模型——VQGAN…

HBuilder X 中Vue.js基础使用4->表单输入绑定(三)

表单绑定是实现动态数据双向绑定的重要部分,它让开发者可以轻松地管理和响应用户输入。本文将详细介绍如何在Vue 3中利用v-model指令以及一些特定修饰符来处理不同类型的表单输入。 v-model双向数据绑定 Vue的 v-model 指令提供了双向绑定的功能,key在…

「虚拟现实中的心理咨询:探索心灵世界的新方法」

内容概要 当我们想到虚拟现实时,很多人会联想到游戏或娱乐,但如今其在心理咨询领域的应用正在逐渐崭露头角。传统的心理咨询方式常常局限在咨询室内,面临着空间和情感隔阂的问题。然而,沉浸式环境的出现,使得治疗者能…

2024最新的开源博客系统:vue3.x+SpringBoot 3.x 前后端分离

本文转载自:https://fangcaicoding.cn/article/54 大家好!我是方才,目前是8人后端研发团队的负责人,拥有6年后端经验&3年团队管理经验,截止目前面试过近200位候选人,主导过单表上10亿、累计上100亿数据…

C++核心编程和桌面应用开发 第十七天(set和multiset容器 pair map和multimap容器)

目录 1.set和multiset容器 1.1构造和赋值 1.2交换和大小 1.3插入和删除 1.4统计和查找 1.5pair对组 1.6set和multiset的区别 1.7指定内置数据类型排序规则 1.8指定自定义数据类型排序规则 2.map和multimap容器 2.1构造和赋值 2.2交换和大小 2.3插入和删除 2.4统计…

01.如何用DDD重构老项目

学习资料来源:DDD独家秘籍视频合集 https://space.bilibili.com/24690212/channel/collectiondetail?sid1940048&ctype0 文章目录 动机DDD与重构实践重构? 重写从一开始就采用DDD重构步骤1. 添加领域模块2.分离出有价值的代码3.迁移到领域模块4.重复2,3 动机 …

OSI公布OSAID 1.0版 “开源人工智能”首次被定义

在2024年ALL THINGS OPEN大会上,Open Source Initiative (OSI) 正式发布了开源人工智能定义(OSAID)1.0版本,标志着全球首个开源AI标准的诞生。OSAID将作为衡量人工智能系统是否符合“开源人工智能”标准的依据,为社区主…

接口测试(八)jmeter——参数化(CSV Data Set Config)

一、CSV Data Set Config 需求:批量注册5个用户,从CSV文件导入用户数据 1. 【线程组】–>【添加】–>【配置元件】–>【CSV Data Set Config】 2. 【CSV数据文件设置】设置如下 3. 设置线程数为5 4. 运行后查看响应结果

【优选算法篇】前缀之序,后缀之章:于数列深处邂逅算法的光与影

文章目录 C 前缀和详解:基础题解与思维分析前言第一章:前缀和基础应用1.1 一维前缀和模板题解法(前缀和)图解分析C代码实现易错点提示代码解读题目解析总结 1.2 二维前缀和模板题解法(二维前缀和)图解分析C…

Xcode 16.1 (16B40) 发布下载 - Apple 平台 IDE

Xcode 16.1 (16B40) 发布下载 - Apple 平台 IDE IDE for iOS/iPadOS/macOS/watchOS/tvOS/visonOS 发布日期:2024 年 10 月 28 日 Xcode 16.1 包含适用于 iOS 18.1、iPadOS 18.1、Apple tvOS 18.1、watchOS 11.1、macOS Sequoia 15.1 和 visionOS 2.1 的 SDK。Xco…

SpringBoot篇(简化操作的原理)

目录 一、代码位置 二、统一版本管理(parent) 三、提供 starter简化 Maven 配置 四、自动配置 Spring(引导类) 五、嵌入式 servlet 容器 一、代码位置 二、统一版本管理(parent) SpringBoot项目都会继…

业务流程顺畅度为何受制于数据失真

在当今数字化驱动的商业环境中,企业的业务流程高度依赖于数据的准确性和完整性。然而,数据失真问题却如同隐匿在流程中的“暗礁”,频繁地给企业的业务流程顺畅度带来严重挑战,进而影响企业的整体运营效率和竞争力。 数据失真的表…

vscode和pycharm在当前工作目录的不同|python获取当前文件目录和当前工作目录

问题背景 相信大家都遇到过一个问题:一个项目在vscode(或pycharm)明明可以正常运行,但当在pycharm(或vscode)中时,却经常会出现路径错误。起初,对于这个问题,我也是一知…

基于Java的电商书城系统源码带本地搭建教程

技术框架:jQuery MySQL5.7 mybatis jsp shiro 运行环境:jdk8 IntelliJ IDEA maven3 宝塔面板 系统功能介绍 该系统分为前台展示和后台管理两大模块,前台主要是为消费者服务。该子系统实现了注册,登录, 以及…

闯关leetcode——232. Implement Queue using Stacks

大纲 题目地址内容 解题代码地址 题目 地址 https://leetcode.com/problems/implement-queue-using-stacks/description/ 内容 Implement a first in first out (FIFO) queue using only two stacks. The implemented queue should support all the functions of a normal …

自动化测试覆盖率提升的关键步骤

自动化测试覆盖不足的问题可以通过增加测试用例的数量和质量、引入代码覆盖率分析工具、加强团队的测试意识和技能、优化测试框架和工具、自动化测试与手动测试相结合等方式来解决。其中,引入代码覆盖率分析工具是关键,它可以帮助我们精准地识别未被测试…

手机柔性屏全贴合视觉应用

在高科技日新月异的今天,手机柔性显示屏作为智能手机市场的新宠,以其独特的可弯曲、轻薄及高耐用性特性引领着行业潮流。然而,在利用贴合机加工这些先进显示屏的过程中,仍面临着诸多技术挑战。其中,高精度对位、应力控…

大数据新视界 -- 大数据大厂之大数据重塑影视娱乐产业的未来(4 - 4)

💖💖💖亲爱的朋友们,热烈欢迎你们来到 青云交的博客!能与你们在此邂逅,我满心欢喜,深感无比荣幸。在这个瞬息万变的时代,我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

近端串扰和远端串扰

近端串扰和远端串扰 近端串扰噪声持续时间长,远端串扰噪声峰值大 远端串扰噪声随耦合长度增加而增大 近端串扰:耦合长度小时,噪声随耦合长度增加而增大 远端串扰具有如下4个特性: 表层走线有远端串扰,内层走线之间可近似认为不存在远端串扰…