当前位置:3016.com-金沙城中心官网 > 前端 > 轻松学习 JavaScript(7):对象属性描述符

轻松学习 JavaScript(7):对象属性描述符

文章作者:前端 上传时间:2019-10-22

自在学习 JavaScript(7):对象属性描述符

2018/01/11 · JavaScript · 对象

原版的书文出处: Dhananjay Kumar   译文出处:码农网/小峰   

在JavaScript中,你能够如下所示创设一个对象字面量:

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

1
2
3
4
var cat = {
    name: 'foo',
    age: 9
};

乍大器晚成看,好像对象cat有字符串和数字值那多个天性。不过,那不只是JavaScript解释器。在ES5中,介绍了品质描述符的概念。在大家承袭研究属性描述符从前,让我们试着应对多少个难题:

  • 哪些创建只读属性?
  • 如何制订不可胜言的属性?
  • 怎么着使属性不可配置?
  • 怎么样规定三个天性是不是是只读的?

只要您了然属性描述符,那么你就能够回答全部这几个主题素材。

请看上面的代码:

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

1
2
3
4
5
6
var cat = {
    name: 'foo',
    age: 9
};
var a = Object.getOwnPropertyDescriptor(cat, 'name');
console.log(a);

出口将如下所示:

图片 1

正如您在那间看看的,这些天性有六性情形:

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

1
2
3
4
5
6
7
8
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

1
2
3
4
5
6
7
8
'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将抛出特别,如下所示:

图片 2

此间的妄诞音信说,你不可能赋值到只读属性。相当于说,若是属性的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 });

1
2
3
4
5
6
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非常,如下图所示。你会获取不大概再一次定义属性名称的谬误:

图片 3

在利用configurable的时候,你须求牢记,改造configurable的值只好做一回。假诺将品质的configurable设置为false,那么你就不能够重新分配它;你不能收回对configurable的改观。请看下边的代码:

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

1
2
3
4
5
6
var cat = {
    name: 'foo',
    age: 9
};
Object.defineProperty(cat, 'name', { configurable: false });
Object.defineProperty(cat, 'name', { configurable: true });

作者们在重新分配name属性的configurable,可是,JavaScript会对上述操作抛出二个TypeError,如下图所示。正如你所观望的,风流洒脱旦configurable被安装为false,就无法撤除那些更换。

图片 4

另叁个重视的事务是,尽管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

1
2
3
4
5
6
7
8
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 deleted console.log(cat.age); // undefined

1
2
3
4
5
6
7
8
9
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 deleted
console.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 }

1
2
3
4
5
6
7
8
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

1
2
3
4
5
6
7
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

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

结论

作为一名正式的JavaScript开辟职员,你不可能不对JavaScript对象属性描述符有贰个很好的接头,笔者期待你能从那篇小说中学到某些知识!请继续关切我们的下生机勃勃篇文章,继续攻读JavaScript中更关键的概念。

1 赞 收藏 评论

图片 5

本文由3016.com-金沙城中心官网发布于前端,转载请注明出处:轻松学习 JavaScript(7):对象属性描述符

关键词: