当前位置: 首页 > news >正文

object.defineProperty用法

Object.defineProperty 是 JavaScript 中一个用于定义对象属性的静态方法。它允许你精确控制对象的属性,包括属性的值、可写性、可枚举性和可配置性等特性。这个方法在需要定义特殊的属性行为时非常有用,例如,在 Vue.js 中,它常用于实现数据的响应式系统。

基本语法

Object.defineProperty(obj, prop, descriptor)
  • obj:要定义属性的对象。
  • prop:要定义的属性名。
  • descriptor:一个描述符对象,指定属性的特性。

属性描述符(descriptor)

描述符对象可以包含以下属性:

  1. value:属性的值。默认是 undefined
  2. writable:布尔值,表示属性是否可以被修改。默认是 false
  3. enumerable:布尔值,表示属性是否会出现在 for...in 循环中以及 Object.keys 方法中。默认是 false
  4. configurable:布尔值,表示属性是否可以被删除或修改其特性。默认是 false
  5. get:一个函数,表示当访问属性值时要执行的函数。默认是 undefined
  6. set:一个函数,表示当设置属性值时要执行的函数。默认是 undefined

示例

1. 定义一个基本属性
let obj = {};
Object.defineProperty(obj, 'name', {value: 'John',writable: true,enumerable: true,configurable: true
});console.log(obj.name); // John
obj.name = 'Doe';
console.log(obj.name); // Doe

在这个例子中,我们创建了一个属性 name,它的值是 'John',并且可以被修改(writable: true)、可以被枚举(enumerable: true),并且可以被重新定义或删除(configurable: true)。

2. 只读属性
let obj = {};
Object.defineProperty(obj, 'age', {value: 30,writable: false,enumerable: true,configurable: true
});console.log(obj.age); // 30
obj.age = 35;
console.log(obj.age); // 30 (无法修改)

在这个例子中,属性 age 的值是 30,但由于 writable 设置为 false,它的值无法被修改。

3. 使用 getset 方法
let obj = {internalValue: 0
};Object.defineProperty(obj, 'value', {get() {return this.internalValue;},set(newValue) {this.internalValue = newValue;}
});console.log(obj.value); // 0
obj.value = 10;
console.log(obj.value); // 10

在这个例子中,value 属性使用了 getset 方法。访问 value 属性时会调用 get 方法,设置 value 属性时会调用 set 方法。

4. 定义不可枚举属性
let obj = {};
Object.defineProperty(obj, 'hidden', {value: 'secret',enumerable: false,configurable: true
});console.log(Object.keys(obj)); // []
console.log(obj.hidden); // secret

在这个例子中,属性 hidden 是不可枚举的,因此它不会出现在 Object.keys() 的结果中,但它仍然可以通过 obj.hidden 访问。

总结

Object.defineProperty 允许你以非常细粒度的方式定义对象的属性及其行为。通过使用属性描述符,你可以控制属性的读写、枚举和配置行为,这对于创建复杂的对象和实现自定义行为非常有用。

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 开放式耳机的优缺点有什么?本文为你讲解推荐一下!
  • encodeURI 确保特殊字符能够正确传输
  • 告别手动记录,音频转文字软件助力会议记录新高度
  • 【Android 设备上的所有相关 WiFi 命令和使用方法】
  • 【架构设计】安全架构设计
  • SpringBoot优雅的封装不同研发环境下(环境隔离)RocketMq自动ack和手动ack
  • Python爬虫—常用的网络爬虫工具推荐
  • 3.服务注册_服务发现
  • 口语笔记——非谓语动词
  • 【代码随想录训练营第42期 Day38打卡 - 动态规划Part6 - LeetCode 322. 零钱兑换 279.完全平方数 139.单词拆分
  • MyBatis-Plus联表查询(mybatis-plus-join)
  • 1.ftp简介
  • C++程序调用SetWindowsHookEx全局拦截键盘按键消息和窗口消息的Hook实例分享
  • 相机掉帧采集速度慢怎么办巨型帧9014
  • [随便学学]在doker服务器中实现ssh免密登陆
  • @jsonView过滤属性
  • Android路由框架AnnoRouter:使用Java接口来定义路由跳转
  • E-HPC支持多队列管理和自动伸缩
  • java中的hashCode
  • Linux中的硬链接与软链接
  • React Native移动开发实战-3-实现页面间的数据传递
  • Ruby 2.x 源代码分析:扩展 概述
  • vue 配置sass、scss全局变量
  • Web Storage相关
  • 搞机器学习要哪些技能
  • 坑!为什么View.startAnimation不起作用?
  • 前端之React实战:创建跨平台的项目架构
  • 使用权重正则化较少模型过拟合
  • 微信开源mars源码分析1—上层samples分析
  • 新版博客前端前瞻
  • 一文看透浏览器架构
  • AI又要和人类“对打”,Deepmind宣布《星战Ⅱ》即将开始 ...
  • ​ 无限可能性的探索:Amazon Lightsail轻量应用服务器引领数字化时代创新发展
  • ​第20课 在Android Native开发中加入新的C++类
  • ​二进制运算符:(与运算)、|(或运算)、~(取反运算)、^(异或运算)、位移运算符​
  • ​批处理文件中的errorlevel用法
  • ​七周四次课(5月9日)iptables filter表案例、iptables nat表应用
  • # SpringBoot 如何让指定的Bean先加载
  • # 详解 JS 中的事件循环、宏/微任务、Primise对象、定时器函数,以及其在工作中的应用和注意事项
  • $.proxy和$.extend
  • (09)Hive——CTE 公共表达式
  • (javaweb)Http协议
  • (Redis使用系列) Springboot 使用Redis+Session实现Session共享 ,简单的单点登录 五
  • (solr系列:一)使用tomcat部署solr服务
  • (板子)A* astar算法,AcWing第k短路+八数码 带注释
  • (第二周)效能测试
  • (附源码)ssm航空客运订票系统 毕业设计 141612
  • (附源码)ssm考试题库管理系统 毕业设计 069043
  • (回溯) LeetCode 78. 子集
  • (七)Appdesigner-初步入门及常用组件的使用方法说明
  • (十三)MipMap
  • (未解决)macOS matplotlib 中文是方框
  • (一) storm的集群安装与配置
  • (一)WLAN定义和基本架构转
  • (转)Oracle 9i 数据库设计指引全集(1)