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

轻易学习 JavaScript(柒):对象属性描述符

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中,你能够如下所示成立叁个目的字面量:

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

在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
};
var cat = {
  name: 'foo',
  age: 9
};
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

另3个重视的事务是,纵然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中,介绍了品质描述符的定义。在我们继续切磋属性描述符在此之前,让大家试着应对多少个难题:

乍1看,好像对象cat有字符串和数字值那多少个属性。但是,那不仅仅是JavaScript解释器。在ES5中,介绍了品质描述符的定义。在大家一连研究属性描述符此前,让大家试着回答多少个难点:

乍一看,好像对象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。那是另1个索要牢记的根本领项:通过设置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
  • 怎么创建只读属性?
  • 怎么着制定不可胜计的质量?
  • 何以使属性不可配置?
  • 什么样分明3脾品质是还是不是是只读的?
  • 怎么成立只读属性?
  • 怎样制定不可胜道的天性?
  • 何以使属性不可配置?
  • 哪些分明3性情能是否是只读的?
  • 怎么创立只读属性?
  • 怎么样制定不可胜数的性质?
  • 怎么样使属性不可配置?
  • 哪些明确二天品质是还是不是是只读的?

结论

用作一名专业的JavaScript开荒职员,你不能够不对JavaScript对象属性描述符有三个很好的接头,笔者期待您能从那篇文章中学到有个别知识!请继续关心我们的下1篇小说,继续深造JavaScript中更重要的概念。

1 赞 收藏
评论

图片 5

若是你精晓属性描述符,那么您就足以应对全部那些标题。

万一你通晓属性描述符,那么您就足以应对全数这个标题。

只要你精通属性描述符,那么你就足以应对全体那几个难点。

相关文章