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 放大镜 放大倍率和视窗尺寸
May 09 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 Javascript
基于vue实现微博三方登录流程解析
Nov 04 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 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
浅谈电磁辐射对健康的影响
2021/03/01 无线电
php生成高清缩略图实例详解
2015/12/07 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
jquery简单体验
2007/01/10 Javascript
一个加载js文件的小脚本
2007/06/28 Javascript
简单通用的JS滑动门代码
2008/12/19 Javascript
js计算页面刷新的次数
2009/07/20 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
Python高效编程技巧
2013/01/07 Python
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
django云端留言板实例详解
2019/07/22 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
Why do we need Unit test
2013/01/03 面试题
金融专业个人的自我评价
2013/10/18 职场文书
英文版销售经理个人求职信
2013/11/20 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
公安机关起诉意见书
2015/05/20 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS