必威-必威-欢迎您

必威,必威官网企业自成立以来,以策略先行,经营致胜,管理为本的商,业推广理念,一步一个脚印发展成为同类企业中经营范围最广,在行业内颇具影响力的企业。

如果你理解属性描述符,介绍了属性描述符的概

2019-10-05 05:36 来源:未知

轻便学习 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解释器。在ES5中,介绍了质量描述符的定义。在大家继续商量属性描述符在此之前,让大家试着应对多少个难点:

  • 怎样成立只读属性?
  • 哪些制订数见不鲜的习性?
  • 怎么样使属性不可配置?
  • 如何分明贰本性能是不是是只读的?

假如您掌握属性描述符,那么你就能够答应全数那些主题材料。

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

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

出口将如下所示:

  图片 2 image

正如您在这里看见的,那么些性格有五个特点:

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

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

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非凡,如下图所示。你会收获无法再一次定义属性名称的荒唐:

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

乍一看,好像对象cat有字符串和数字值那八个属性。不过,那不止是JavaScript解释器。在ES5中,介绍了品质描述符的概念。在大家接二连三研商属性描述符以前,让大家试着回答多少个难点:

乍一看,好像对象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。那是另二个内需记住的严重性事项:通过设置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
  • 如何成立只读属性?
  • 哪些制订千千万万的性质?
  • 如何使属性不可配置?
  • 什么显明两特质量是不是是只读的?
  • 何以成立只读属性?
  • 什么样拟订不可胜数的属性?
  • 怎么使属性不可配置?
  • 什么明确壹特性质是不是是只读的?
  • 哪些创造只读属性?
  • 什么样制订更仆难数的天性?
  • 怎么着使属性不可配置?
  • 如何规定叁本性质是还是不是是只读的?
TAG标签:
版权声明:本文由必威发布于必威-前端,转载请注明出处:如果你理解属性描述符,介绍了属性描述符的概