更多
 当前上元教育宁波校 其它分校: 慈溪校 无锡校 常州校 南京校 上海校 绍兴校 南通校   (建议使用IE浏览本网站/分辨率1024*768px)    
宁波培训学校 宁波培训学校
 位置: 邦元教育 >> 机电培训 >> 技术资讯 >> 正文
 

轻松学习 JavaScript——第 7 部分:对象属性描述符

作者:Admin  更新时间:2018/09/29  点击次数:

在JavaScript中,你可以如下所示创建一个对象字面量:

var cat = {
name: 'foo',
age: 9};

乍一看,好像对象cat有字符串和数字值这两个属性。然而,这不仅仅是JavaScript解释器。在ES5中,介绍了属性描述符的概念。在我们继续讨论属性描述符之前,让我们试着回答几个问题:

如何创建只读属性?

如何制定不可枚举的属性?

如何使属性不可配置?

如何确定一个属性是否是只读的?

如果你理解属性描述符,那么你就可以回答所有这些问题。

请看下面的代码:

var cat = {
name: 'foo',
age: 9};var a = Object.getOwnPropertyDescriptor(cat, 'name');console.log(a);

输出将如下所示:

宁波上元教育:轻松学习 JavaScript——第 7 部分:对象属性描述符


正如你在这里看到的,这个属性有四个特征:

value保存属性的数据,而writable,enumerable和configurable则描述属性的其他特征。接下来我们将对这些特征一一阐述。

writable

属性的值是否可以更改是由writable特征决定的。如果writable设置为false,那么属性的值不能更改,JavaScript将忽略属性值中的任何更改。请看下面的代码:

var cat = {
name: 'foo',
age: 9};Object.defineProperty(cat, 'name', { writable: false });console.log(cat.name); // foo cat.name = "koo"; // JavaScript will ignore it as writable is set to false console.log(cat.name); // foo

你可以使用Object.defineProperty更改writable、enumerable和configurable特征的值。我们稍后会在这篇文章中详细讨论Object.defineProperty,但正如你在上面的代码片段中看到的那样,我们已经将writable属性设置为false,从而改变了name属性的值。JavaScript将忽略重新分配,并且name属性的值将保持为foo。

如果以严格模式运行代码,那么为了重新分配writable设置为false的属性值,JavaScript将抛出异常。请看下面的代码:

'use strict';var cat = {
name: 'foo',
age: 9};Object.defineProperty(cat, 'name', { writable: false });console.log(cat.name); // foo cat.name = "koo"; // error

在这里,JavaScript以严格模式运行,因此,当你重新分配name属性的值时,JavaScript将抛出异常,如下所示:

宁波上元教育:轻松学习 JavaScript——第 7 部分:对象属性描述符


这里的错误消息说,你不能赋值到只读属性。也就是说,如果属性的writable特征设置为false,那么属性将充当只读属性。

configurable

属性的其他特征是否可以配置取决于configurable的值。如果属性configurable设置为false,则不能更改writable和enumerable的值。请看下面的代码:

var cat = {
name: 'foo',
age: 9};Object.defineProperty(cat, 'name', { configurable: false });Object.defineProperty(cat, 'name', { enumerable: false });

在这里,我们将name属性的configurable设置为false。之后,我们将enumerable设置为false。如前所述,一旦一个属性的configurable设置为false,那么你就不能改变另一个特征。

对于上面的代码,JavaScript会抛出一个TypeError异常,如下图所示。你会得到无法重新定义属性名称的错误:

宁波上元教育:轻松学习 JavaScript——第 7 部分:对象属性描述符


在使用configurable的时候,你需要记住,改变configurable的值只能做一次。如果将属性的configurable设置为false,那么你就不能重新分配它;你无法撤消对configurable的更改。请看下面的代码:

var cat = {
name: 'foo',
age: 9};Object.defineProperty(cat, 'name', { configurable: false });Object.defineProperty(cat, 'name', { configurable: true });

我们在重新分配name属性的configurable,但是,JavaScript会对上述操作抛出一个TypeError,如下图所示。正如你所看到的,一旦configurable被设置为false,就不能撤销那个更改。

宁波上元教育:轻松学习 JavaScript——第 7 部分:对象属性描述符


另一个重要的事情是,即使configurable设置为false,writable也可以从true更改为false——但反之则不然。请看下面的代码:

var cat = {
name: 'foo',
age: 9};Object.defineProperty(cat, 'name', { configurable: false });Object.defineProperty(cat, 'name', { writable: false });
cat.name = 'koo';console.log(cat.name); // foo

如果不是在严格模式下,上面的代码不会抛出任何异常。正如我们前面所讨论的,即使configurable为false,writable也可以从true变为false,反之则不然。另一个需要牢记的重要事项是,你无法删除configurable设置为false的属性。

var cat = {
name: 'foo',
age: 9};Object.defineProperty(cat, 'name', { configurable: false });delete cat.name; // wont delete as configurable is false console.log(cat.name); // foo delete (cat.age); // will be deletedconsole.log(cat.age); // undefined

在上面的代码中,你会发现JavaScript不会删除name属性,因为name属性的configurable设置为false。

enumerable

对于一个属性,如果你设置了enumerable:false,那么这个属性将不会出现在枚举中,因此它不能用在诸如for … in循环这样的语句中。

请看下面的代码:

var cat = {
name: 'foo',
age: 9};Object.defineProperty(cat, 'name', { enumerable: false });for (let f in cat) { console.log(f); // will print only age }

在这里,你只能得到age,因为name的enumerable被设置为了false。这是另一个需要记住的重要事项:通过设置enumerable:false,唯一的属性将不可用于枚举。我们来看下面的代码:

var cat = {
name: 'foo',
age: 9};Object.defineProperty(cat, 'name', { enumerable: false });console.log(cat.name); // foo console.log('name' in cat); // true

在这里,name属性enumerable设置为false,但你可以访问它。在检查name是否属于cat的属性时,你也会发现是true。

有时,你可能需要检查某个特定属性enumerable是否设置为false或true。你可以通过使用propertyIsEnumerable方法来做到这一点:

var cat = {
name: 'foo',
age: 9};Object.defineProperty(cat, 'name', { enumerable: false });console.log(cat.propertyIsEnumerable("name")); // false

结论

作为一名专业的JavaScript开发人员,你必须对JavaScript对象属性描述符有一个很好的理解,我希望你能从这篇文章中学到一些知识!请继续关注我们的下一篇文章,继续学习JavaScript中更重要的概念。

上一篇: 轻松学习 JavaScript——第 5 部分:简化函数提升 下一篇: 没有了
相关文章
 ·轻松学习 JavaScript——第 5 部分:简化函数提升
 ·PLC的三个典型实例,你值得拥有
 ·JavaScript——第 3 部分:函数中的默认参数
 ·JVM学习(二)垃圾收集算法及Safe Point介绍
 ·JVM学习(一)Java运行时数据区域
 ·新品 | 西门子发布全新Simatic S7-1500 冗
 ·MySQL练习题及答案(三)
 ·宁波上元教育:做程序员真的很难吗
 ·宁波上元教育:给初学Java的宝贵部分知识点归纳
 ·宁波上元教育:技术负责人需要具备哪几个核心能力,你
网上报名
姓名:  性别:
电话: 
地址:
课程:
最新课程 更多
 ·轻松学习 JavaScript——第 7 部分
 ·轻松学习 JavaScript——第 5 部分
 ·PLC的三个典型实例,你值得拥有
 ·JavaScript——第 3 部分:函数中的
 ·JVM学习(二)垃圾收集算法及Safe
 ·JVM学习(一)Java运行时数据区域
 ·新品 | 西门子发布全新Simatic S7-
 ·MySQL练习题及答案(三)
 ·Web前端工程师培训、Web前端开发培
 ·宁波上元教育:做程序员真的很难吗
推荐课程 更多
 ·轻松学习 JavaScript——第 7 部分
 ·轻松学习 JavaScript——第 5 部分
 ·PLC的三个典型实例,你值得拥有
 ·JavaScript——第 3 部分:函数中的
 ·JVM学习(二)垃圾收集算法及Safe
 ·JVM学习(一)Java运行时数据区域
 ·新品 | 西门子发布全新Simatic S7-
 ·MySQL练习题及答案(三)
 ·Web前端工程师培训、Web前端开发培
 ·宁波上元教育:做程序员真的很难吗
热门课程 更多
 ·轻松学习 JavaScript——第 7 部分
 ·轻松学习 JavaScript——第 5 部分
 ·PLC的三个典型实例,你值得拥有
 ·JavaScript——第 3 部分:函数中的
 ·JVM学习(二)垃圾收集算法及Safe
 ·JVM学习(一)Java运行时数据区域
 ·新品 | 西门子发布全新Simatic S7-
 ·MySQL练习题及答案(三)
 ·Web前端工程师培训、Web前端开发培
 ·宁波上元教育:做程序员真的很难吗
网站首页| 友情链接| 最新开课| 会计培训| 电脑培训| 外语培训| 建筑培训| 信息技术| 才艺培训| 职业资格| 关于我们| 网上报名| 网站地图| 后台管理
联系地址:宁波市海曙区中山东路137号7楼
联系电话:0574-87327805、87323725、87324192、87325693、87325823、87326973、87329343、87329353、87042056