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面向对象编程
Mar 02 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 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作的文本留言本的例子(四)
2006/10/09 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
python用户管理系统
2018/03/13 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
pytorch 求网络模型参数实例
2019/12/30 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
教师的实习鉴定
2013/12/15 职场文书
成功的餐厅经营创业计划书
2014/01/15 职场文书
高三生物教学反思
2014/01/25 职场文书
活动宣传策划方案
2014/05/23 职场文书
党委班子剖析材料
2014/08/21 职场文书
如何写辞职书
2015/02/26 职场文书
青年联谊会致辞
2015/07/31 职场文书
python执行js代码的方法
2021/05/13 Python
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android
SQL Server中搜索特定的对象
2022/05/25 SQL Server