ES6中Object.defineProperty 的详细用法和使用场景以及例子
ES6 Object.defineProperty() 用法总结
Object.defineProperty() 是 ES5 引入的一个方法,ES6 继续强化了该方法的使用,它允许我们为对象的属性定义或修改 属性描述符。它能够控制对象属性的行为,如读写权限、可枚举性和可配置性。
1. Object.defineProperty() 的语法
Object.defineProperty(obj, prop, descriptor);
obj:目标对象,想要在该对象上定义或修改属性。prop:要定义或修改的属性的名称。descriptor:属性描述符,描述属性的特性。描述符是一个对象,包含以下常见属性:
属性描述符的常用字段
value:属性的值,默认为undefined。writable:布尔值,表示属性值是否可写(默认为false)。enumerable:布尔值,表示属性是否能被for...in循环和Object.keys()迭代(默认为false)。configurable:布尔值,表示属性是否能被删除或者修改属性的特性(默认为false)。get:一个函数,作为该属性的 getter,读取属性值时调用(默认为undefined)。set:一个函数,作为该属性的 setter,写入属性值时调用(默认为undefined)。
2. 用法和例子
2.1 定义一个属性并设置其值
const obj = {};
Object.defineProperty(obj, 'name', {value: 'Alice',writable: true, // 属性值可写enumerable: true, // 属性可枚举configurable: true // 属性可配置
});console.log(obj.name); // "Alice"
在这个例子中,我们定义了一个 name 属性,给它设置了值 'Alice',并且该属性是可写、可枚举和可配置的。
2.2 设置只读属性
const obj = {};
Object.defineProperty(obj, 'name', {value: 'Alice',writable: false // 属性值不可修改
});console.log(obj.name); // "Alice"
obj.name = 'Bob'; // 尝试修改
console.log(obj.name); // "Alice" (未修改)
通过将 writable 设置为 false,name 属性变成了只读属性,不能修改。
2.3 定义 getter 和 setter
Object.defineProperty() 可以为属性定义 getter 和 setter,使得可以通过函数的方式来获取和设置属性值。
const obj = {};
Object.defineProperty(obj, 'name', {get() {return 'Hello, ' + this._name;},set(value) {this._name = value;},enumerable: true,configurable: true
});obj.name = 'Alice';
console.log(obj.name); // "Hello, Alice"
在这个例子中,我们为 name 属性定义了一个 getter 和 setter。在设置属性时,set 会被调用,而在获取属性时,get 会被调用。
2.4 定义不可枚举的属性
const obj = {};
Object.defineProperty(obj, 'hidden', {value: 'secret',enumerable: false // 属性不可枚举
});for (let key in obj) {console.log(key); // 不会输出 'hidden'
}
console.log(Object.keys(obj)); // [],'hidden' 也不会出现在 Object.keys() 中
在这个例子中,hidden 属性被定义为不可枚举,因此它不会出现在 for...in 循环或者 Object.keys() 的结果中。
2.5 定义不可配置的属性
const obj = {};
Object.defineProperty(obj, 'name', {value: 'Alice',configurable: false // 不可删除或修改
});delete obj.name; // 尝试删除
console.log(obj.name); // "Alice" (未删除)Object.defineProperty(obj, 'name', {value: 'Bob' // 尝试修改
}); // TypeError: Cannot redefine property: name
通过将 configurable 设置为 false,我们使 name 属性不能被删除或重新定义。
2.6 定义一个访问器属性
const obj = {_age: 25
};Object.defineProperty(obj, 'age', {get() {return this._age;},set(value) {this._age = value >= 0 ? value : 0; // 确保年龄不能为负},enumerable: true,configurable: true
});console.log(obj.age); // 25
obj.age = -5; // 设置一个负数
console.log(obj.age); // 0,年龄不允许为负
这个例子演示了通过 get 和 set 来定义访问器属性。当试图设置一个负数时,setter 将其转化为 0,确保属性值始终有效。
3. 使用场景
3.1 实现封装
Object.defineProperty() 常用于 JavaScript 中模拟封装,隐藏对象的内部数据,并通过 getter 和 setter 来控制访问。
const person = {};
let _age = 25;Object.defineProperty(person, 'age', {get() {return _age;},set(value) {if (value < 0) {throw new Error("Age cannot be negative");}_age = value;}
});person.age = 30; // 正常设置
console.log(person.age); // 30
person.age = -5; // 错误:抛出异常
在这个例子中,age 属性的值被封装在内部变量 _age 中,并且设置了限制条件,避免年龄为负数。
3.2 创建常量属性
如果你想创建一个常量属性,可以通过 Object.defineProperty() 配置 writable 和 configurable 为 false,使得该属性不可更改或删除。
const obj = {};
Object.defineProperty(obj, 'PI', {value: 3.14159,writable: false,configurable: false
});console.log(obj.PI); // 3.14159
obj.PI = 3.14; // 无效,不会修改
console.log(obj.PI); // 3.14159
通过这种方式,你可以模拟常量,使属性的值不能被修改。
3.3 定义计算属性
Object.defineProperty() 可以用来动态创建和计算属性,结合 getter 和 setter 实现灵活的计算。
const obj = {_width: 100,_height: 50
};Object.defineProperty(obj, 'area', {get() {return this._width * this._height;},set(value) {console.log('Area is calculated automatically');},enumerable: true
});console.log(obj.area); // 5000
obj.area = 1000; // 触发 set(),但不会修改值
在这个例子中,area 是计算属性,它返回 width 和 height 的乘积,而 set 只是被触发,但不做实际的修改。
4. 总结
Object.defineProperty()使你能够对对象属性的行为进行精确控制,如定义getter、setter,控制是否可写、是否可枚举、是否可配置等。- 它常用于实现对象的封装、属性校验、计算属性和常量属性等。
- 它允许创建不直接操作对象的内部数据,增加灵活性和安全性。
通过 Object.defineProperty(),开发者可以更加灵活地控制对象的行为和属性特性,满足更复杂的编程需求。
相关文章:
ES6中Object.defineProperty 的详细用法和使用场景以及例子
ES6 Object.defineProperty() 用法总结 Object.defineProperty() 是 ES5 引入的一个方法,ES6 继续强化了该方法的使用,它允许我们为对象的属性定义或修改 属性描述符。它能够控制对象属性的行为,如读写权限、可枚举性和可配置性。 1. Objec…...
揭秘云计算 | 5、关于云计算效率的讨论
一、 公有云效率更高? 解:公有云具有更高的效率。首先我们需要知道效率到底指的是什么。这是个亟须澄清的概念。在这里效率是指云数据中心(我们将在后文中介绍其定义)中的IT设备资源利用率,其中最具有代表性的指标就是…...
【Linux探索学习】第二十七弹——信号(上):Linux 信号基础详解
Linux学习笔记: https://blog.csdn.net/2301_80220607/category_12805278.html?spm1001.2014.3001.5482 前言: 前面我们已经将进程通信部分讲完了,现在我们来讲一个进程部分也非常重要的知识点——信号,信号也是进程间通信的一…...
如何查询网站是否被百度蜘蛛收录?
一、使用site命令查询 这是最直接的方法。在百度搜索框中输入“site:你的网站域名”,例如“site:example.com”(请将“example.com”替换为你实际的网站域名)。如果搜索结果显示了你的网站页面,并且显示了收录的页面数量…...
什么是网络安全审计?网络安全审计的作用...
网络安全审计通过对网络数据的采集、分析、识别,实时动态监测通信内容、网络行为和网络流量,发现和捕获各种敏感信息、违规行为,实时报警响应,全面记录网络系统中的各种会话和事件,实现对网络信息的智能关联分析、评估…...
EasyExcel实现excel导入(模版上传)
目录 效果pom.xmlapplication.ymlcontrollerservice依赖类前台vue代码某个功能如果需要添加大量的数据,通过一条条的方式添加的方式,肯定不合理,本文通过excel导入的方式来实现该功能,100条数据导入成功85条,失败15条,肯定需要返回一个表格给前台或者返回1个错误excel给前…...
Vue 3最新组件解析与实践指南:提升开发效率的利器
目录 引言 一、Vue 3核心组件特性解析 1. Composition API与组件逻辑复用 2. 内置组件与生命周期优化 3. 新一代UI组件库推荐 二、高级组件开发技巧 1. 插件化架构设计 2. 跨层级组件通信 三、性能优化实战 1. 惰性计算与缓存策略 2. 虚拟滚动与列表优化 3. Tree S…...
【前端】如何安装配置WebStorm软件?
文章目录 前言一、前端开发工具WebStorm和VS Code对比二、官网下载三、安装1、开始安装2、选择安装路径3、安装选项4、选择开始菜单文件夹5、安装成功 四、启动WebStorm五、登录授权六、开始使用 前言 WebStorm 是一款由 JetBrains 公司开发的专业集成开发环境(IDE…...
vllm专题(一):安装-GPU
vLLM 是一个 Python 库,支持以下 GPU 变体。选择您的 GPU 类型以查看供应商特定的说明: 1. NVIDIA CUDA vLLM 包含预编译的 C++ 和 CUDA(12.1)二进制文件。 2. AMD ROCm vLLM 支持配备 ROCm 6.3 的 AMD GPU。 注意 此设备没有预构建的 wheel 包,因此您必须使用预构建的 Do…...
php文件包含
文章目录 基础概念php伪协议什么是协议协议的格式php中的协议file协议http协议ftp协议php://input协议php://filter协议php://data协议 php文件上传机制高级文件包含nginx文件日志包含临时文件包含session文件包含pear文件包含远程文件包含 基础概念 文件包含,相当…...
升级 SpringBoot3 全项目讲解 — Spring Boot 3 中如何发Http请求?
随着 Spring Boot 3 的发布,许多开发者开始考虑将他们的项目升级到这个新版本。Spring Boot 3 带来了许多新特性和改进,尤其是在 HTTP 请求处理方面。本文将详细介绍如何在 Spring Boot 3 中发送 HTTP 请求,并通过代码示例帮助你快速上手。 …...
分类预测 | MFO-LSSVM飞蛾扑火算法优化最小二乘支持向量机多特征分类预测Matlab实现
分类预测 | MFO-LSSVM飞蛾扑火算法优化最小二乘支持向量机多特征分类预测Matlab实现 目录 分类预测 | MFO-LSSVM飞蛾扑火算法优化最小二乘支持向量机多特征分类预测Matlab实现分类效果基本介绍程序设计参考资料 分类效果 基本介绍 1.Matlab实现MFO-LSSVM飞蛾扑火算法优化最小二…...
MyBatis Plus核心功能
一、条件构造器 1.为什么要学? 用于方便地构建SQL查询条件 2.如何使用? 3.实战案例 例:查询出名字中带o的,存款大于等于1000元的人的id,username,info,balance字段 数据库如图: 示例: Test void testL…...
nginx ngx_http_module(10) 指令详解
nginx ngx_http_module(10) 指令详解 nginx 模块目录 nginx 全指令目录 一、目录 1.1 模块简介 ngx_http_v2_module:HTTP/2支持模块,允许Nginx通过HTTP/2协议与客户端进行通信。HTTP/2带来了许多性能优化,如多路复用、头部压缩和服务器推…...
【ENSP】链路聚合的两种模式
【ENSP】链路聚合的两种模式 1、背景介绍2、链路聚合的使用场景3、配置过程1、手工模式Eth-Trunk配置2、静态LACP模式Eth-Trunk 4、总结 1、背景介绍 随着网络规模的不断扩大,人们对骨干链路的带宽吞吐量和可靠性提出了越来越高的要求。在传统方案中,为…...
Windows环境安装部署minimind步骤
Windows环境安装部署minimind步骤 必要的软件环境 git git,可下载安装版,本机中下载绿色版,解压到本地目录下(如:c:\soft\git.win64),可将此路径添加到PATH环境变量中,供其他程序…...
让大模型帮我设计crnn网络及可运行demo,gpt4o豆包qwendeepseek-r1
prompt 使用 crnn 提取图像特征,给出图像好坏的二分类结果,写清楚代码备注,注释清楚向量维度大小,并给出一个可运行的 demo1、GPT-4o 以下是一个使用 CRNN(Convolutional Recurrent Neural Network)提取图…...
代码随想录-- 第一天图论 --- 岛屿的数量
99 统计岛屿的数量 c 99. 岛屿数量 #include <iostream> #include <vector> #include <queue>using namespace std;struct MGraph {int numVertices, numEdges;vector<vector<int>> Edge; };int dir[4][2] {{1, 0}, {0, 1}, {-1, 0}, {0, -1}…...
Mybatis MyBatis框架的缓存 一级缓存
1. 缓存的概念 缓存的概念 在内存中临时存储数据,速度快,可以减少数据库的访问次数。经常需要查询,不经常修改的数据,不是特别重要的数据都适合于存储到缓存中。 2.Mybatis缓存 mybatis包含了一个非常强大的查询缓存特性&#…...
Weboffice在线Word权限控制:限制编辑,只读、修订、禁止复制等
在现代企业办公中,文档编辑是一项常见且重要的任务。尤其是在线办公环境中,员工需要在网页中打开和编辑文档,但如何确保这些文档只能进行预览而无法被编辑或复制,成为许多企业面临的一个痛点。尤其是在处理涉密文档时,…...
7.4.分块查找
一.分块查找的算法思想: 1.实例: 以上述图片的顺序表为例, 该顺序表的数据元素从整体来看是乱序的,但如果把这些数据元素分成一块一块的小区间, 第一个区间[0,1]索引上的数据元素都是小于等于10的, 第二…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机:Ubuntu 20.04.6 LTSHost:ARM32位交叉编译器:arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
利用ngx_stream_return_module构建简易 TCP/UDP 响应网关
一、模块概述 ngx_stream_return_module 提供了一个极简的指令: return <value>;在收到客户端连接后,立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量(如 $time_iso8601、$remote_addr 等)&a…...
visual studio 2022更改主题为深色
visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中,选择 环境 -> 常规 ,将其中的颜色主题改成深色 点击确定,更改完成...
Python爬虫实战:研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...
【机器视觉】单目测距——运动结构恢复
ps:图是随便找的,为了凑个封面 前言 在前面对光流法进行进一步改进,希望将2D光流推广至3D场景流时,发现2D转3D过程中存在尺度歧义问题,需要补全摄像头拍摄图像中缺失的深度信息,否则解空间不收敛…...
Frozen-Flask :将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是:将一个 Flask Web 应用生成成纯静态 HTML 文件,从而可以部署到静态网站托管服务上,如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...
数据链路层的主要功能是什么
数据链路层(OSI模型第2层)的核心功能是在相邻网络节点(如交换机、主机)间提供可靠的数据帧传输服务,主要职责包括: 🔑 核心功能详解: 帧封装与解封装 封装: 将网络层下发…...
【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)
🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...
uniapp中使用aixos 报错
问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
