JavaScript对象的property属性详解


Posted in Javascript onApril 01, 2014

JavaScript中对象的property有三个属性:
1.writable。该property是否可写。
2.enumerable。当使用for/in语句时,该property是否会被枚举。
3.configurable。该property的属性是否可以修改,property是否可以删除。

在ECMAScript 3标准中,上面三个属性的值均为true且不可改:新建对象的property是可写的、可被枚举的、可删除的;而在ECMAScript 5标准中,可通过property的描述对象(property descriptor)来对这些属性进行配置和修改。

如果将property的值信息也作为property的属性来看的话,对象中的property拥有四个属性:value、writable、enumerable和configurable。

对于用getter和setter方法来定义的property,由于其没有writable属性(property是否可写取决于setter方法是否存在),因此这种property也有四个属性:get、set、enumerable和configurable — get和set属性的值为function。

获取对象property的属性

ECMAScript 5标准中,可以通过Object.getOwnPropertyDescriptor()来获取对象自身某个property的属性信息:

var o = {x:1};
var a = Object.create(o);
a.y = 3;
console.log(Object.getOwnPropertyDescriptor(a, "y"));//Object {configurable=true, enumerable=true, writable=true, value=3}
console.log(Object.getOwnPropertyDescriptor(a, "x"));//undefined

可以看到,如果property不存在或者property继承自原型对象,则返回undefined。

设置对象property的属性

ECMAScript 5标准中,可以通过Object.defineProperty()来设置对象自身某个property的属性:

Object.defineProperty(a, "y", {
    value:3,
    writable:true,
    enumerable:false,
    configuration:true
});
console.log(a.propertyIsEnumerable("y"));//false

如果设置的property是从原型对象中继承而来的,那么JavaScript将在对象自身中创建一个同名的property,这与赋值操作的相关行为一致:
Object.defineProperty(a, "x", {
    value:1,
    writable:true,
    enumerable:false,
    configuration:true
});
console.log(a.propertyIsEnumerable("x"));//false
console.log(o.propertyIsEnumerable("x"));//true

除了修改property的属性,还可以将property改为用getter或setter访问:
Object.defineProperty(a, "y", {
    get:function(){return 42;}
});
console.log(a.y);//42

在使用Object.defineProperty()时,property描述对象中的属性值可以部分忽略,当属性值有所忽略时,JavaScript中的处理规则如下:

如果property是新建的,则所有忽略的属性值均为false或undefined。
如果property已存在,则所有忽略的属性值维持原样不变。

批量设置对象property的属性

如果需要一次性设置多个property的属性,可以使用Object.defineProperties()语句。该语句将返回修改后的对象。

Object.defineProperties(a, {
    "y":{value:79, writable:true, enumerable:true, configurable:true},
    "z":{value:99, writable:true, enumerable:true, configurable:true}
});
console.log(a);//Object {y=79, z=99}

property属性设置规则

当对property属性进行修改时,必须遵循以下规则。如果违反规则,JavaScript将报TypeError错误:

如果对象不是extensible的,则只能修改已有property的属性,无法添加新的property。
如果property的configurable属性为false,则无法修改configurable和enumerable属性的值,对于writable属性,可以将其从true改为false,但无法将其从false改为true。如果property由getter和setter定义,则getter和setter方法无法被修改。
如果property的configurable属性和writable属性均为false,则property值不可改。如果property的writable属性为false,但其configurable属性为true,则property值依然可以修改。

Javascript 相关文章推荐
详解JavaScript的变量和数据类型
Nov 27 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
Bootstrap CSS使用方法
Dec 23 Javascript
Vue指令的钩子函数使用方法
Mar 20 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
微信小程序wx:for和wx:for-item的用法详解
Apr 01 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
泛谈JS逻辑判断选择器 || &&
May 24 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 #Javascript
jQuery 取值、赋值的基本方法整理
Mar 31 #Javascript
js改变鼠标的形状和样式的方法
Mar 31 #Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 #Javascript
js简单的表格添加行和删除行操作示例
Mar 31 #Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 #Javascript
jquery控制display属性为none或block
Mar 31 #Javascript
You might like
一个好用的分页函数
2006/11/16 PHP
PHP+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
phpfans留言版用到的install.php
2007/01/04 PHP
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
js静态作用域的功能。
2006/12/25 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
Python求离散序列导数的示例
2019/07/10 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
客服服务心得体会
2013/12/30 职场文书
优秀护士先进事迹
2014/05/08 职场文书
护士个人总结范文
2015/02/13 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python