www.qjdy.com-奇迹赌场 > www.qjdy.com >    译文出处

原标题:   译文出处

浏览次数:73 时间:2019-12-08

自在学习 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则描述属性的任何特色。接下来大家将对这几个特征一大器晚成演说。

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

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。

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

本文由www.qjdy.com-奇迹赌场发布于www.qjdy.com,转载请注明出处:   译文出处

关键词: ag电子游戏排行 JavaScript

上一篇:前端工程师面试题汇总

下一篇:没有了