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 混淆加密收藏
Jan 16 Javascript
javascript 一些用法小结
Sep 11 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
发布Angular应用至生产环境的方法
Dec 10 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
JS防抖和节流实例解析
Sep 24 Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 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简单smarty入门程序实例
2015/06/11 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
JS在IE下缺少标识符的错误
2014/07/23 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
Seajs源码详解分析
2019/04/02 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
itchat接口使用示例
2017/10/23 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
企业员工培训感言
2014/02/26 职场文书
党员公开承诺书2015
2015/01/21 职场文书
领导欢迎词范文
2015/01/26 职场文书
个人年终总结范文
2015/03/09 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python