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 相关文章推荐
jquery $.ajax入门应用二
Nov 19 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
AngularJS 单元测试(一)详解
Sep 21 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
setTimeout时间设置为0详细解析
Mar 13 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
Apr 14 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
深入理解javascript中的this
Feb 08 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
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
Js apply方法详解
2017/02/16 Javascript
Vue header组件开发详解
2018/01/26 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
空指针到底是什么
2012/08/07 面试题
社会实践自我鉴定
2013/11/07 职场文书
晚会邀请函范文
2014/01/24 职场文书
企业领导对照检查材料
2014/08/20 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python