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 相关文章推荐
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
js实现广告漂浮效果的小例子
Jul 02 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
JavaScript实现更换背景图片
Oct 18 Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 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
第1次亲密接触PHP5(2)
2006/10/09 PHP
php5.3 废弃函数小结
2010/05/16 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
浅说js变量
2011/05/25 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
python处理圆角图片、圆形图片的例子
2014/04/25 Python
python3中str(字符串)的使用教程
2017/03/23 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
python快排算法详解
2019/03/04 Python
Flask处理Web表单的实现方法
2021/01/31 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
2015年财务科工作总结范文
2015/05/13 职场文书
Python如何把不同类型数据的json序列化
2021/04/30 Python