澳门太阳娱乐集团官网-太阳集团太阳娱乐登录

轻巧学习 JavaScript(7):对象属性描述符
分类:网页制作

自在学习 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则描述属性的其余特色。接下来我们将对那一个特点意气风发意气风发解说。

在JavaScript中,你能够如下所示创立多个目的字面量:

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,那么属性将担负只读属性。

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

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。

乍风流倜傥看,好像对象cat有字符串和数字值那多个属性。不过,那不光是JavaScript解释器。在ES5中,介绍了品质描述符的概念。在我们三翻五次研商属性描述符早前,让大家试着回答多少个难点:

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

后生可畏旦您通晓属性描述符,那么你就能够回答全数那些难点。

请看上边包车型大巴代码:

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

出口将如下所示:

 

图片 6

image

正如你在那间看见的,那性子子有六性情状:

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将抛出非常,如下所示:

 

图片 7

image

这里的大谬否则新闻说,你不能够赋值到只读属性。也正是说,假使属性的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十分,如下图所示。你会拿到不可能再次定义属性名称的失实:

 

图片 8

image

在动用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,就不能够打消这多少个改良。

 

图片 9

image

另二个生死攸关的业务是,尽管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 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 
}

在这里处,你一定要拿到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中更主要的定义。

招待参与学习交流群569772982,大家协同学习调换。

本文由澳门太阳娱乐集团官网发布于网页制作,转载请注明出处:轻巧学习 JavaScript(7):对象属性描述符

上一篇:JavaScript原生对象及扩展(收藏) 下一篇:【澳门太阳娱乐集团官网】浅谈 JS 创建对象的
猜你喜欢
热门排行
精彩图文