轻易学习 JavaScript——第 7 部分:对象属性描述符

作者:信息技术

轻松学习 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);

出口将如下所示:

 

本文由杏彩发布,转载请注明来源

关键词: