菜单

轻松上 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地图