技术大牛前端干货：理解 JavaScript 中的对象的属性

来源：数据猿 作者：赵业辉

在达观数据的前端工作中，对象的属性是经常接触和使用的，正好最近重温了一下《JavaScript 高级程序设计》，把书中理解对象属性的部分整理一下与大家分享。

ECMA-262把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或函数”。对象的每个属性或方法都有一个名字，而每个名字都映射到一个值。

JavaScript原生提供一个Object对象，所有其他对象都继承自这个对象。Object本身也是一个构造函数，可以直接通过它来生成新对象。

创建自定义对象最简单的方式是创建一个Object的实例，再为其添加属性和方法：

使用对象字面量语法创建对象：

1属性类型

ECMA-262第五版定义只有内部采用的特性时，描述了属性的各种特征。为了表示特性是内部值，规范中把他们放到了两对方括号中，比如[[Enumerable]]。

1.1数据属性

数据属性包含一个数据值的位置，在这个位置可以读取和写入值，数据属性有四个描述其行为的特性：

• [[Configurable]]：表示能否通过delete删除属性从而新定义属性，能否修改属性的特性，或能否把属性修改为访问器属性，默认为true。

• [[Enumerable]]：表示能否通过for-in 循环返回属性，默认为true。

• [[Writable]]：表示能否修改属性的值，默认为true。

• [[Value]]：包含这个属性的数据值。读取属性值的时候从这里读取，写入属性值的时候把新值保存在这个位置。默认值为undefined。

这里创建了一个名为 name 的属性，为其指定的值是 younixiao。也就是说，[[Value]]特性被修改为younixiao，对这个值的任何修改都将反映在这个位置。

修改属性默认的特性，必须使用Object.defineProperty方法。其接收三个参数：属性所在的对象、属性的名字和一个描述符对象，描述符对象的属性必须是数据属性的特性。

这个例子为 person 对象创建了名为 name 的属性，它的值”younixiao”是只读的。这个属性的值是不能被修改的，如果尝试为它指定新值，在非严格模式下，赋值操作将被忽略;在严格模式下，赋值操作将导致抛出错误。

类似的规则也适用于不可配置的属性：

把[[configurable]] 设置为false，表示不能从对象中删除该属性。如果对这个属性调用delete，在非严格模式下该属性的删除操作不会生效，在严格模式下会导致抛出错误。一旦把属性定义为不可配置，就不能再改为可配置。此时，如果再调用Object.defineProperty方法修改除[[Writable]] 之外的特性，都会导致错误：

可以多次调用Object.defineProperty方法修改同一个属性，但在把[[Configurable]] 特性设置为false之后就会有限制了。

在调用Object.defineProperty方法时，如果不指定，除[[Value]] 特性外的特性的默认值都是false。

1.2访问器属性

访问器属性不包含数据值，它们包含一对getter和setter函数(这两个函数都不是必须的)。在读取访问器属性时，会调用getter函数，这个函数负责返回有效的值;在写入访问器属性时，会调用setter函数并传入新值，这个函数负责如何处理数据。访问器属性有以下四个特性：

• [[Configurable]]：表示能否通过delete删除属性从而新定义属性，能否修改属性的特性，或能否把属性修改为访问器属性，默认为true。

• [[Enumerable]]：表示能否通过for-in循环返回属性，默认为true。

• [[Get]]： 读取属性时调用的函数，默认为undefined。

• [[Set]]：写入属性时调用的函数，默认为undefined。

访问器属性不能直接定义，必须使用Object.defineProperty定义：

_year 前面的下划线用于表示只能通过对象方法访问的属性。

以上代码创建了一个 book 对象，并给它定义两个默认的属性：_year 和 edition。year 的访问器属性包含getter函数和setter函数。getter函数返回 _year 的值，setter函数通过计算得出 _year 和 edition 的值。这是访问器属性的常见用法，即设置一个属性的值会导致其他属性发生变化。

只指定getter函数意味着属性不可写，尝试写入属性会被忽略，在严格模式下此操作会抛出异常。

只指定setter函数意味着属性不可读，在非严格模式下回返回undefined，在严格模式下会抛出错误

在旧的浏览器中创建访问器属性可以使用defineGetter和defineSetter函数。

2定义多个属性

使用Object.defineProperties定义多个属性。这个方法接受连个对象参数，第一个对象是要添加和修改其属性的对象，第二个对象的属性与第一个对象中要添加或修改的属性一一对应：

以上代码在 book 对象上定义了两个数据属性(_year 和 edition)和一个访问器属性(year)。

3读取属性的特性

使用Object.getOwnPropertyDescriptor方法可以取得给定属性的描述符。其接收两个参数：属性 所在的对象和要读取描述符的属性名称。返回值是一个对象，如果是访问器属性，这个对象的属性有configurable、enumerable、get 和set;如果是数据属性这个对象的属性则有configurable、enumerable、writable、value：

在 JavaScript 中，可以针对任何对象——包括 DOM 和 BOM，使用Object.getOwnPropertyDescriptor方法。

在本文中，我们学习整理了 JavaScript 中对象的属性和特性。但是，JavaScript 不是必须得通过特性来组织一个属性，它们主要是作为ECMAScript规范中定义的一个抽象操作。但有时候这些特性也会明确的出现在语言代码中,比如在属性描述符中。

作者简介：

赵业辉，14年毕业于南京信息工程大学，网络媒体艺术专业。目前就职于达而观信息科技(上海)有限公司，任职前端开发工程师，负责大数据平台的pc与webapp研发工作。曾在杭州数云信息技术有限公司任职前端工程师，参与了多个项目的前端工作。对web兼容性，前端性能提升，SEO，前端组件化开发，响应式设计以及主流前端框架有着丰富的实战经验。

注：本文由 达观数据 投稿数据猿发布。

欢迎更多大数据企业、爱好者投稿数据猿，来稿请直接投递至：tougao@datayuan.cn