Object.defineProperty 与 属性描述符
为JavaScript对象新增或者修改属性,有两种不同方式:直接使用=赋值或者使用Object.defineProperty 定义,使用后者的话还可以设置属性的描述符。
Object.defineProperty
Object.defineProperty(obj, prop, descriptor) 接受三个参数:
- obj:要在其上定义属性的对象。
- prop:要定义或修改的属性的名称。
- descriptor:将被定义或修改的属性描述符。
属性描述符
属性描述符是一个对象,作用就是定义一个属性的属性 (-,-)。他有两种主要形式:数据描述符和存取描述符。
数据描述符是一个具有值的属性,该值可能是可写的,也可能不是可写的,特有属性:value、writable。存取描述符是由getter-setter函数对描述的属性,特有属性:get、set。描述符必须是这两种形式之一;不能同时是两者。
Object.getOwnPropertyDescriptor() 可以获取指定对象上一个自有属性对应的属性描述符。
数据描述符和存取描述符均具有以下可选键值:
1. configurable
表示对象的该属性是否可以被删除,以及其他特性是否可以被修改(除了可以单向改变 writable 为 false)。默认为 false。
let Tom = {}
Object.defineProperty(Tom, 'height', {
value: 174
})
delete Tom.height
console.log(Tom) // {height: 174}
let Tom = {}
Object.defineProperty(Tom, 'height', {
value: 174,
configurable: true
})
delete Tom.height
console.log(Tom) // {}
2. enumerable
当定义了对象的属性是否可以在 for...in 循环和 Object.keys() 中被枚举。默认为 false。
let Tom = {}
Object.defineProperty(Tom, 'height', {
value: 174
})
Object.keys(Tom) // []
let Tom = {}
Object.defineProperty(Tom, 'height', {
value: 174,
enumerable: true
})
Object.keys(Tom) // ["height"]
数据描述符具有以下可选键值:
1. value
该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined。
2. writable
当且仅当该属性的writable为true时,value才能被赋值运算符 “=” 改变。默认为 false。
let Tom = {}
Object.defineProperty(Tom, 'height', {
value: 174
})
Tom.height = 180
console.log(Tom) // {height: 174}
Object.getOwnPropertyDescriptor(Tom,'height')
// {value: 174, writable: false, enumerable: false, configurable: false}
let Tom = {}
Object.defineProperty(Tom, 'height', {
value: 174,
writable: true
})
Tom.height = 180
console.log(Tom) // {height: 180}
使用“=”定义属性时,writable/enumerable/configurable 都为true:
let Tom = {}
Tom.height = 174
Object.getOwnPropertyDescriptor(Tom,'height')
// {value: 180, writable: true, enumerable: true, configurable: true}
存取描述符同时具有以下可选键值:
1. get
一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。当访问该属性时,该方法会被执行,方法执行时没有参数传入,但是会传入this对象(由于继承关系,这里的this并不一定是定义该属性的对象)。
2. set
一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。当属性值修改时,触发执行该方法。该方法将接受唯一参数,即该属性新的参数值。
let Tom = {
realHeight: 173
}
Object.defineProperty(Tom, 'height', {
get: function() {
console.log('报高一点')
return this.realHeight + 5;
},
set: function(value) {
console.log('现在高' + value + 'cm')
this.realHeight = value
}
})
Object.getOwnPropertyDescriptor(Tom,'height')
// {get: ƒ, set: ƒ, enumerable: false, configurable: false}
Tom.height // 178
Tom.height = 169
Tom.height // 174
Object.defineProperty 与 属性描述符的更多相关文章
- JS属性描述符之Object.defineProperty()定义对象属性特性
一.Object.defineProperty的作用 用来给对象新增属性,和修改对象中的属性. 二.JS对象中的描述符 js对象中两种属性描述符:数据描述符和存取描述符(访问描述符). 注意事项: 1 ...
- 深入理解javascript对象系列第三篇——神秘的属性描述符
× 目录 [1]类型 [2]方法 [3]详述[4]状态 前面的话 对于操作系统中的文件,我们可以驾轻就熟将其设置为只读.隐藏.系统文件或普通文件.于对象来说,属性描述符提供类似的功能,用来描述对象的值 ...
- JavaScript 属性描述符
属性描述符(Property Descriptor)是 ES5 之后出现的概念,顾名思义,它用于描述属性应该是什么样,例如是否只读,能否枚举,能否可配置等.所有对象属性均可使用属性描述符来定义. 属性 ...
- JS属性描述符
var myObject = { a:2 }; Object.getOwnpropertyDescriptor(myObject,"a"); { value:2, writable ...
- JS - 属性描述符各配置的默认值的注意事项
通过字面量或者obj.x = 1;创建的属性 与 通过Object.defineProperty创建的属性,他们的属性描述符的默认值是不同的,前者都为true,后者都为false.
- js 面向对象之属性描述符
上回介绍了面向对象之构造器属性.这次介绍下属性描述符 遍历对象属性 let person = {name: "lisi"} for (key in person) { consol ...
- JavaScript.descriptor(属性描述符)
属性描述符是对JavaScript属性的描述,包括:value.writable.enumerable.configurable,除value其他默认为true. 本文包括: 取得属性描述符. Obj ...
- vue2.x版本中Object.defineProperty对象属性监听和关联
前言 在vue2.x版本官方文档中 深入响应式原理 https://cn.vuejs.org/v2/guide/reactivity.html一文的解释当中,Object.defineProperty ...
- Python:高级主题之(属性取值和赋值过程、属性描述符、装饰器)
Python:高级主题之(属性取值和赋值过程.属性描述符.装饰器) 背景 学习了Javascript才知道原来属性的取值和赋值操作访问的“位置”可能不同.还有词法作用域这个东西,这也是我学习任何一门语 ...
随机推荐
- 【转载】android 常用开源框架
对于Android初学者以及对于我们菜鸟,这些大神们开发的轻量级框架非常有用(更别说开源的了). 下面转载这10个框架的介绍:(按顺序来吧没有什么排名). 一. Afinal 官方介绍: Afina ...
- Centos6更新yum repo
163开源镜像站是国内比较老的一个网站.很多人都在使用. step 1/3 备份原镜像文件: cd /etc/yum.repos.d mv CentOS-Base.repo CentOS-Base.r ...
- 软件工程第四周作业之四则运算-C#实现
拿到题目的时候,快放假了,也没心思做.十月七号的一下午大概从两点做到八点半,加上十月八号的十二点半到两点半,做了一共八个半小时,去掉吃饭半个小时那么一共做了八个小时. 逆波兰表达式我是扒的别人代码,没 ...
- 3dContactPointAnnotationTool开发日志(十九)
增加了输出接触点信息到文件功能.
- 阻塞 , 非阻塞 , 同步 ,异步 , I/O模型
•阻塞,非阻塞:进程/线程要访问的数据是否就绪,进程/线程是否需要等待: •同步,异步:访问数据的方式,同步需要主动读写数据,在读写数据的过程中还是会阻塞:异步只需要I/O操作完成的通知,并不主动读写 ...
- 关于对 NUMA 理解(学习笔记,便于以后查阅)
对NUMA的理解: NUMA是多核心CPU架构中的一种,其全称为Non-Uniform Memory Access,简单来说就是在多核心CPU中,机器的物理内存是分配给各个核的,架构简图如下所示: 每 ...
- window service 创建
1:vs中创建一个 window servece 2.右键 添加安装程序 3.更改属性视图中的Account属性为LocalService(本地服务) 更改ServiceName为你自己的服务名称 ...
- 【bzoj2223】[Coci 2009]PATULJCI 主席树
题目描述 样例输入 10 3 1 2 1 2 1 2 3 2 3 3 8 1 2 1 3 1 4 1 5 2 5 2 6 6 9 7 10 样例输出 no yes 1 no yes 1 no yes ...
- 【bzoj3529】[Sdoi2014]数表 莫比乌斯反演+离线+树状数组
题目描述 有一张n×m的数表,其第i行第j列(1 <= i <= n ,1 <= j <= m)的数值为能同时整除i和j的所有自然数之和.给定a,计算数表中不大于a的数之和. ...
- pascal语言中学版整理
P1:主菜单File中的Command shell选项,可以暂时退出Pascal,进入DOS提示符状态,但Pascal仍然驻留在内存中.输入命令exit即可返回Pascal. P3:Edit菜单中Un ...