菜单

自在上 JavaScript——第 7 部分:对象属性描述吻合

2018年11月18日 - 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中,你得如下所示创建一个目标字面量:

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,大家一起学习交流。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图