对象属性描述符,轻松学习

时间:2019-09-24 01:28来源:关于计算机
轻松学习 JavaScript(7):对象属性描述符 2018/01/11 · JavaScript· 对象 原来的作品出处: DhananjayKumar   译文出处:码农网/小峰    在JavaScript中,你可以如下所示创造四个指标字面量:

轻松学习 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——第 7 部分:对象属性描述符,javascript

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

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

乍一看,好像对象cat有字符串和数字值那三个天性。但是,那不只是JavaScript解释器。在ES第55中学,介绍了质量描述符的定义。在我们承接研讨属性描述符在此之前,让我们试着应对几个难题:

  • 哪些创立只读属性?
  • 怎么样制定不可胜举的习性?
  • 如何使属性不可配置?
  • 怎样规定壹天性质是不是是只读的?

若果您精晓属性描述符,那么您就足以回答全部那个难点。

请看上面包车型地铁代码:

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

输出将如下所示:

  图片 2 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

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

图片 3

此间的失实新闻说,你不可能赋值到只读属性。也正是说,假如属性的writable特征设置为false,那么属性将出任只读属性。

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将抛出十一分,如下所示:

  图片 4 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 });

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卓殊,如下图所示。你会赢得不能再度定义属性名称的错误:

图片 5

在应用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,就不能够撤销这多少个改变。

图片 6

另二个注重的政工是,尽管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。

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至极,如下图所示。你会博得无法再度定义属性名称的错误:

  图片 7 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,就不能够收回那么些改动。

  图片 8 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 }

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

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中更主要的定义。

1 赞 收藏 评论

图片 9

结论

用作一名专门的学问的JavaScript开采职员,你必需对JavaScript对象属性描述符有三个很好的敞亮,作者期待您能从那篇小说中学到有的学问!请继续关注大家的下一篇文章,继续深造JavaScript中更首要的定义。

应接插足学习交换群569772982,大家共同念书沟通。

JavaScript——第 7 部分:对象属性描述符,javascript 在JavaScript中,你能够如下所示成立叁个目的字面量: var cat = { name: 'foo', age:...

编辑:关于计算机 本文来源:对象属性描述符,轻松学习

关键词: