《js高级程序设计》6.1.1-6.1.3——数据属性、访问器属性
数据属性:该属性包含了一个数据值的位置,它包含了4个描述行为的特性:
1. [[Configurable]]:表示是否能通过delete删除属性从而重新定义属性,能否修改属性的特性,能否把属性修改为访问器属性。
2. [[Enumerable]]:表示能否用for-in循环返回。
3. [[writable]]:表示能否修改属性的值。
4. [[Value]]:包含这个属性的数据值。读取属性值的时候从这个位置读,写入属性值的时候更新到这个位置,默认值为undefined。
直接在对象上定义的属性的数据特性默认如下:
1. [[Configurable]]:true
2. [[Enumerable]]:true
3. [[writable]]:true
4. [[Value]]:”xiaochang” (初始时的赋值)
这些特性不能直接被访问,要修改属性的特性只能通过Object.defineProperty( )方法,该方法包含三个参数:属性所在的对象,属性的名字,描述符对象[configurable|enumerable|writable|value]。例如:
var person = {age:100
};Object.defineProperty(person,"name",{configurable:false,writable:false,value:"xiaochang"
});Object.defineProperty(person,"tall",{value:160
});for(attr in person){console.log(attr); //name,age
}
console.log(person.name); //xiaochang
person.name="CC"; //为name属性指定新值
console.log(person.name); //xiaochang
delete person.name; //删除name属性
console.log(person.name); //xiaochangconsole.log(person.age); //100
person.age=200; //为age属性指定新值
console.log(person.age); //200
delete person.age; //删除age属性
console.log(person.age); //undefinedconsole.log(person.tall); //160
person.tall = 160; //修改tall属性的值
console.log(person.tall); //160
delete person.tall; //删除name属性
console.log(person.tall); //160
分析例子可知直接在对象上定义的属性,如age,[[Configurable]],[[Enumerable]],[[writable]]都被设置为true。
属性name的[[Configurable]],[[writable]]被设置为false,所以无法修改和删除。
调用Object.defineProperty( )方法时,如果不显示指定configurable,enumerable,writable的值,就默认为false,如属性tall。
另外需要注意的是当configurable设置为false后无法再将其改为true,且除了writable之外,无法修改其它特性。在configurable为true的情况下可多次调用Object.defineProperty( )修改同一属性。
在非严格情况下修改无法配置的属性操作会被忽略,在严格模式下会抛出错误。
访问器属性:包含getter和setter函数。读取访问器属性时,调用getter函数,返回有效的值;在写入访问器属性时,调用setter函数传入新值。它包含了4个特性:
1. [[Configurable]]:表示是否能通过delete删除属性从而重新定义属性,能否修改属性的特性,能否把属性修改为访问器属性。
2. [[Enumerable]]:表示能否用for-in循环返回。
3. [[Get]]:读取属性时调用的函数,默认undefined。
4. [[Set]]:写入属性时调用的函数,默认undefined。
getter和setter不一定要成对出现,只有getter函数证明该属性只读不可写,尝试写入在非严格模式下会被忽略,严格模式会抛出错误。相同,只有setter函数证明只写不能读,尝试读在非严格模式下返回undefined,严格模式则抛出错误。
访问器属性无法直接定义,必须使用Object.defineProperty( )来定义,如下:
var person = {_name:"xiaochang", //name属性只读不可写_age:100, //age属性只写不可读_tel:123456 //tel属性可读可写
};
Object.defineProperty(person,"name",{get:function(){return this._name;}
});
Object.defineProperty(person,"age",{set:function(newage){this._age = newage;}
});
Object.defineProperty(person,"tel",{get:function(){return this._tel;},set:function(newtel){this._tel= newtel;}
});
console.log(person.name); //"xiaochang"
person.name = "CC"; //尝试修改name属性
console.log(person.name); //"xiaochang"
console.log(person.age); //不可读属性,undefined
person.age = 200; //修改age
console.log(person._age); //直接读取对象方法才能访问的属性,可以看到值已更新200
console.log(person.tel); //123456
person.age = 654321; //更新tel
console.log(person.tel); //654321
属性前面的下划线表示只能通过对象方法访问的属性,当我们调用person.name时实际调用了name属性的getter函数(直接调用person._name可得到相同的结果,这样做访问器就没什么意义了)。通过上面例子中可以很清晰的看出属性与访问器之间的关系。
支持Object.defineProperty( )方法的浏览器有IE9+(IE8是第一实现Object.defineProperty( )方法的浏览器,但仅限于DOM对象,且只能创建访问器属性)、Firefox4+、Safari5+,Opera12+、Chrome。在不支持Object.defineProperty( )方法的浏览器中不能修改[[Configurable]],[[Enumerable]]。
在Object.defineProperty( )方法之前,要创建访问器属性,一般使用非标准的方法:__defineGetter__()
和__defineSetter__()
,这两个方法最初在Firefox引入,后来chrome1和Opera9.5也支持。改写上面的tel属性访问器如下:
person.__defineGetter__("tel",function(){return this._tel;
});
person.__defineSetter__("tel",function(newtel){this._tel = newtel;
ECMAScript 5还定义Object.defineProperties( )方法,该方法包含两个参数:属性所在的对象,多个属性的名字和其描述符对象组成的对象。其作用于Object.defineProperty( )相同,区别是可一次性定于多个属性。支持该方法的浏览器有IE9+、Firefox4+、Safari5+,Opera12+、Chrome。上面的例子可以改写如下:
var person = {_name:"xiaochang", //name属性只读不可写_age:100, //age属性只写不可读_tel:123456 //tel属性可读可写
};
Object.defineProperties(person,{name:{get:function(){return this._name;}},age:{set:function(newage){this._age = newage;}},tel:{get:function(){return this._tel;},set:function(newtel){this._tel= newtel;}}
});
对于上述讲到的属性特性,ECMAScript 5 给出了可以取得给定属性的描述符的方法Object.getOwnPropertyDescriptor(),该方法包含两个参数:属性所在的对象,要读取其描述符的属性名称。方法返回一个对象。如针对上面的例子可得:
var descriptor = Object.getOwnPropertyDescriptor(person,"tel");
for(attr in descriptor ){console.log(attr+":"+descriptor[attr]);
}运行结果如下:
get:function (){return this._tel;}
set:function (newtel){this._tel= newtel;}
enumerable:false
configurable:false
原文:http://www.2cto.com/kf/201504/393319.html
转载于:https://www.cnblogs.com/mmlvj/p/4664071.html
《js高级程序设计》6.1.1-6.1.3——数据属性、访问器属性相关推荐
- 《Ext JS 高级程序设计》的目录与样张
第一部分 Ext Core 第1 章 Ext Core 重要概念 ············· 2 1.1 Ext.Element······························· 2 1. ...
- Ext JS高级程序设计
Ext JS高级程序设计 图书详细情况查看: http://www.china-pub.com/193076 市场价 :¥59.00 会员价 : ¥44.25(75折) [作 者]黄灯桥;徐会生 [同 ...
- js高级程序设计第四部分
js高级程序设计:BOM.客户端检测 BOM window对象 在浏览器中,window 对象有双重角色,它既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 ...
- 读js高级程序设计中有感
我现在都到js高级程序设计最难的章节,第六章,对象,虽然有人推荐不用全部读完,但我还是完整的读一遍吧,一遍可以敲代码一边看书理解加百度,我认为这种方式很好,可以加深理解增强印象,这是我觉得这本书比JS ...
- 《JS高级程序设计》第二遍读书笔记
这一遍的重点还是在JS语言本身,后面的DOM和BOM部分看的比较快,因为现在实际上用的不多,掌握大致的原理,需要的时候再翻手册就可以了. 认为暂时没必要的知识点WebGL, 认为已经不需要.过时的知识 ...
- JS高级程序设计【红宝书】学习笔记——数据类型
目录 数据类型 Number类型 1.值的范围 2.NaN 3.数值转换 String类型 1.字符字面量(详见JS高级程序设计P63 2.转换为字符串 Symbol类型 Object类型 objec ...
- Js高级程序设计第三版学习(十二章)
Js高级程序设计第三版学习(十二章) 第十二章 DOM2和DOM3 1.样式: 访问样式属性 任何支持style特性的HTML元素都有一 ...
- JS高级程序设计——阅读笔记四
JS高级程序设计--阅读笔记四 第六章 集合引用类型 6.1 Object 6.2 Array 6.2.1 创建数组 from()函数 6.2.2 数组空位 6.2.3 数组索引 6.2.4 检测数组 ...
- Js中的数据属性和访问器属性
Js中的数据属性和访问器属性 在javaScript中,对象的属性分为两种类型:数据属性和访问器属性. 一.数据属性 1.数据属性:它包含的是一个数据值的位置,在这可以对数据值进行读写. 2.数据属性 ...
最新文章
- 北京武耀科技cocos2dx面试题
- Python API简单验证
- 首页显示登陆用户名php,首页登录后怎么在首页显示用户名以及隐藏登录框?
- 赌场圣手(从不失手)——隐马尔可夫!
- ciaodvd数据集的简单介绍_COCO数据集的简单介绍
- python 列表数据类型 200221
- Delphi非应用程序主窗口创建MDI
- android 随音乐跳动,随心音乐,让心跟着跳动起来
- python 状态空间模型_基于状态空间的建模过程
- u检验中的查u界值表_u检验和t检验
- Python基础:while循环 以及 练习题 :三位数的水仙花数 GDP 计算π 判断一个数是否是素数
- 21条自动化测试过程中遭遇的问题及解决思路
- 加载property配置文件
- Python字节单位转换(将字节转换为K M G T)
- 量化交易是什么意思?怎么理解?
- 51单片机定时器2用作串口
- 兔子吃狼的故事,看了就知道其中很深的哲理
- Oracle中的CBO方式
- windows操作系统蓝屏错误对照表五
- 深度学习与计算机视觉(PB-13)—ImageNet数据集准备
热门文章
- 一个很好的练听力的网站
- 开通了一个gmail邮箱
- 使用php连接mysql数据库_PHP使用mysql与mysqli连接Mysql数据库用法示例
- Linux下matlab断点调试
- oracle 实现map,PLSQL实现的map功能,以及一些疑惑
- ae万能弹性表达式_AE脚本精品表达式合集效果库 iExpressions 3.1.006【资源分享1453】...
- 存储引擎——概述|| 各种存储引擎的特性(InnoDB||MyISAM||MEMORY||MERGE) ||存储引擎的选择
- Backbone与服务器接口之Model数据同步
- SpringMVC如何获取请求带来的各种信息 ||如果我们的请求参数是一个POJO(自定义参数类型), SpringMVC会自动的为这个POJO进行赋值
- 如何在网页中嵌入自己想要的字体(实例下载)