defineProperty定义JavaScript对象属性
csdh11 2025-03-06 13:53 14 浏览
Object.defineProperty和Object.defineProperties用于定义或修改对象的属性,是ECMAScript 5中定义的两个方法。通过两个方法我可以定义对象的数据属性或访问器属性,前者用于定义或修改对象的一个属性,后者用于定义或修改多个属性。
1. 对象属性
1.1 对象的定义
定义对象时我们可以使用以下几种形式:
使用"new Object()"创建对象实例:
或者使用字面量创建:
或者:
在上面几个示例中,我们使用三种方式定义了具有相同属性和方法的对象。属性可以理解为对象的特征,而方法可以表示对象的行为,而方法可以认为是一种值是函数的特殊属性。
1.2 属性的类型
ECMAScript 5中定义属性使用Object.defineProperty(),定义对象属性时除了可以定义属性值外,还可以定义属性的形为(即:属性的特性-'attribute'),如:使用[[configurable]]定义属性是否可删除、使用[[enumerable]]定义属性是否可枚举。ECMAScript中有两种属性:数据属性和访问器属性。
数据属性
数据属性用于描述数据值及其形为,数据属性有4个描述形为的特性:
[[configurable]] - 该特性用于描述属性是否可通过delete删除属性。默认值为“true”
[[enumerable]] - 该特性用于描述属性是否可枚举,即是否可通过for-in或Object.keys()枚举。默认值为“true”
[[writable]] - 该特性用于描述属性是否可写(可修改)。默认值为“true”
[[value]] - 该特性用于描述属性的值,属性值的读/写都是操作的这个特性,该特性是一个JavaScript值(值、对象、函数)。默认值为“undefined”
数据属性描述了属性的值及其形为。我们使用如下方式定义一个属性时:
这相当于使用Object.defineProperty()方法定义属性并进行了以下设置:、
访问器属性
访问器,即:getter和setter,这两个属性用于设置或读取属性值([[value]]特性)。访问器可以不定义,不定义时会返回或设置[[value]]特性;设置后将通过这两个方法设置或返回属性值。
[[get]] - 对象属性访问器方法(getter),设置后会通过该方法返回属性值。默认值为“undefined”
[[set]] - 对象属性设置器方法(setter),设置后会通过该方法设置值属性。默认值为“undefined”
我们可以像下面这样定义访问器和设置器:、
2. Object.defineProperty()定义/修改属性
Object.defineProperty()用于定义或修改对象的一个属性,其语法结构如下:
Object.defineProperty(obj, prop, descriptor)
obj - {Object},要定义属性的对象
prop - {String},要定义或修改的属性名
descriptor - {Object},要定义或修改的属性的描述,即:“数据属性”和“访问器属性”
Object.defineProperty()添加一个属性定义,可对已定义的属性进行修改。如,使用Object.defineProperty()通过__proto__特性来设置属性不可继承:
也可以显式的指定各属性的特性值:
还可以通过Object.defineProperty()定义属性的访问/设置器。
3. Object.defineProperties()定义/修改多个属性
Object.defineProperty()可定义可修改对象的一个属性,当定义或修改对象的多个属性时,使用这个方法会比较麻烦。这时可以使用Object.defineProperties()方法来统一设置或修改多个对象属性。该方法语法结构如下:
Object.defineProperties(obj, props)
obj - {Object},要定义或修改属性的对象
prop - {String},要定义或修改的属性名及属性的特性
如,可以使用Object.defineProperties()方法来定义多个对象属性:
来自:http://itbilu.com
- 上一篇:C# 属性
- 下一篇:C# WinForms自定义控件怎么添加自定义属性
相关推荐
- IDEA界面太丑??尝试一下这几个插件
-
前言IntelliJIDEA主要用于支持Java、Scala、Groovy等语言的开发工具,同时具备支持目前主流的技术和框架,擅长于企业应用、移动应用和Web应用的开发。IntelliJi...
- 小巧 Vue 页面滚动进度条组件ScrollProgress
-
今天给大家分享一个轻量级Vue.js全屏滚动进度条组件VueScrollProgress。vue-scroll-progress一款基于vue.js构建的页面滚动进度条组件,...
- 基于vue实现可视化拖拽编辑器,页面生成工具,提升前端开发效率
-
项目介绍基于vue实现的可视化拖拽编辑器,实现页面生成工具,提升前端开发效率。可以基层到移动端项目作为自定义json直接生成UI页面。项目特点功能特点...
- 优秀 vue+heyui 后端管理系统HeyUI-Admin
-
今天再给小伙伴们推荐一款成熟的企业中后台管理系统HEYUI-Admin。heyui-admin基于vue.js和heyui组件库构建的后台管理系统。包含基础表单/表格功能,拓展组件(图表、富文本编辑...
- 响应式 Vue.js 前端组件化框架Xvue-UI
-
今天给小伙伴们推荐一款超不错的Vue轻量级组件框架XVueUI。xvue-ui基于vue2.x构建的响应式前端组件化框架。轻量级、易于上手,提供...
- 《基于SpringBoot+Vue的在线视频系统设计与实现》开题报告
-
【计算机毕业设计案例】基于SpringBoot+Vue的在线视频系统设计与实现_哔哩哔哩_bilibili...
- 超好用 Vue.js 图片裁切组件Vue-ImgCutter
-
今天给小伙伴们分享一个超棒的Vue图片任意裁剪插件VueImgCutter。vue-img-cutter基于vue2.x构建的轻量级剪切图片组件。支持移动图像、放大缩小图片、任意移动图片、固定比...
- Vue 3 进阶用法:异步组件(vue 异步组件原理)
-
一、代码分割一个大型前端应用,如果所有代码都放在单一文件,体积会特别大,下载时间长,白屏时间久,用户体验差。...
- 源码补丁神器—patch-package(源码助手怎么用)
-
作者:张浩一、背景vue项目中使用vue-pdf第三方插件预览pdf,书写业务代码完美运行,pdf文件内容正常预览无问题。后期需求有变,业务需求增加电子签章功能。这个时候pdf文件的内容可以显示出...
- 经验分享:Vue2 项目升级 Vue3 + Element Plus,借助Deepseek手动升级
-
Vue3出来好久了,我开发的项目还在使用Vue2框架,一般情况下不考虑升级,但是最近需要接入工作流程引擎之类的,看了下Vue2生态下操作空间不是很好,那索性尝试升级Vue3吧。一番操作下来,升级成功,...
- 34K Star!史上最全JavaScript资源库 awesome-javascript
-
34KStar!史上最全JavaScript资源宝库大揭秘引言在GitHub上,有一个备受瞩目的JavaScript资源仓库,以其全面的内容和精心的分类,成为了众多开发者的必备参考。这个拥有超过...
- 基于 Vue.js 磁片栅格布局组件VueGridLayout
-
#头条创作挑战赛#今天给大家分享一个超优秀的vue.js拖拽栅格布局插件VueGridLayout。...
- 6款高颜值 Vue3 PC端UI组件库(vue3开发组件库)
-
马上到国庆了,还没学习或者想学习vue3的小伙伴们有安排上没?这次推荐几个比较流行的VUE3UI组件库,合理利用,又或者学习借鉴都是不错的选择。1、element-pluselement-plus...
- 高性能 vue.js+ztree 树形组件Vue-GiantTree
-
今天给大家分享一款超棒的Vue海量数据渲染树形组件VueGiantTree。vue-giant-tree基于ztree封装的Vue树形组件。轻松实现大数据高性能渲染,适合海量数据渲染场景。zTr...
- 【推荐】2024年推荐的6款开源免费 Vue 后台管理系统模板,建议收藏
-
前言在现今的软件开发领域,...
- 一周热门
- 最近发表
-
- IDEA界面太丑??尝试一下这几个插件
- 小巧 Vue 页面滚动进度条组件ScrollProgress
- 基于vue实现可视化拖拽编辑器,页面生成工具,提升前端开发效率
- 优秀 vue+heyui 后端管理系统HeyUI-Admin
- 响应式 Vue.js 前端组件化框架Xvue-UI
- 《基于SpringBoot+Vue的在线视频系统设计与实现》开题报告
- 超好用 Vue.js 图片裁切组件Vue-ImgCutter
- Vue 3 进阶用法:异步组件(vue 异步组件原理)
- 源码补丁神器—patch-package(源码助手怎么用)
- 经验分享:Vue2 项目升级 Vue3 + Element Plus,借助Deepseek手动升级
- 标签列表
-
- mydisktest_v298 (34)
- document.appendchild (35)
- 头像打包下载 (61)
- acmecadconverter_8.52绿色版 (39)
- word文档批量处理大师破解版 (36)
- server2016安装密钥 (33)
- mysql 昨天的日期 (37)
- parsevideo (33)
- 个人网站源码 (37)
- centos7.4下载 (33)
- mysql 查询今天的数据 (34)
- intouch2014r2sp1永久授权 (36)
- 先锋影音源资2019 (35)
- jdk1.8.0_191下载 (33)
- axure9注册码 (33)
- pts/1 (33)
- spire.pdf 破解版 (35)
- shiro jwt (35)
- sklearn中文手册pdf (35)
- itextsharp使用手册 (33)
- 凯立德2012夏季版懒人包 (34)
- 冒险岛代码查询器 (34)
- 128*128png图片 (34)
- jdk1.8.0_131下载 (34)
- dos 删除目录下所有子目录及文件 (36)