達(dá)觀數(shù)據(jù)前端分享：理解 JavaScript 中的對(duì)象的屬性

大數(shù)據(jù) 網(wǎng)站前端達(dá)觀數(shù)據(jù) JavaScript

趙業(yè)輝 | 2016-11-02 14:19

【數(shù)據(jù)猿導(dǎo)讀】在達(dá)觀數(shù)據(jù)的前端工作中，對(duì)象的屬性是經(jīng)常接觸和使用的，作者正好最近重溫了一下《JavaScript 高級(jí)程序設(shè)計(jì)》，把書(shū)中理解對(duì)象屬性的部分整理一下與大家分享

達(dá)觀數(shù)據(jù)前端分享：理解 JavaScript 中的對(duì)象的屬性

來(lái)源：數(shù)據(jù)猿作者：趙業(yè)輝

在達(dá)觀數(shù)據(jù)的前端工作中，對(duì)象的屬性是經(jīng)常接觸和使用的，正好最近重溫了一下《JavaScript 高級(jí)程序設(shè)計(jì)》，把書(shū)中理解對(duì)象屬性的部分整理一下與大家分享。

ECMA-262把對(duì)象定義為：“無(wú)序?qū)傩缘募希鋵傩钥梢园局?、?duì)象或函數(shù)”。對(duì)象的每個(gè)屬性或方法都有一個(gè)名字，而每個(gè)名字都映射到一個(gè)值。

JavaScript原生提供一個(gè)Object對(duì)象，所有其他對(duì)象都繼承自這個(gè)對(duì)象。Object本身也是一個(gè)構(gòu)造函數(shù)，可以直接通過(guò)它來(lái)生成新對(duì)象。

創(chuàng)建自定義對(duì)象最簡(jiǎn)單的方式是創(chuàng)建一個(gè)Object的實(shí)例，再為其添加屬性和方法：

使用對(duì)象字面量語(yǔ)法創(chuàng)建對(duì)象：

1屬性類(lèi)型

ECMA-262第五版定義只有內(nèi)部采用的特性時(shí)，描述了屬性的各種特征。為了表示特性是內(nèi)部值，規(guī)范中把他們放到了兩對(duì)方括號(hào)中，比如[[Enumerable]]。

1.1數(shù)據(jù)屬性

數(shù)據(jù)屬性包含一個(gè)數(shù)據(jù)值的位置，在這個(gè)位置可以讀取和寫(xiě)入值，數(shù)據(jù)屬性有四個(gè)描述其行為的特性：

• [[Configurable]]：表示能否通過(guò)delete刪除屬性從而新定義屬性，能否修改屬性的特性，或能否把屬性修改為訪問(wèn)器屬性，默認(rèn)為true。

• [[Enumerable]]：表示能否通過(guò)for-in 循環(huán)返回屬性，默認(rèn)為true。

• [[Writable]]：表示能否修改屬性的值，默認(rèn)為true。

• [[Value]]：包含這個(gè)屬性的數(shù)據(jù)值。讀取屬性值的時(shí)候從這里讀取，寫(xiě)入屬性值的時(shí)候把新值保存在這個(gè)位置。默認(rèn)值為undefined。

這里創(chuàng)建了一個(gè)名為 name 的屬性，為其指定的值是 younixiao。也就是說(shuō)，[[Value]]特性被修改為younixiao，對(duì)這個(gè)值的任何修改都將反映在這個(gè)位置。

修改屬性默認(rèn)的特性，必須使用Object.defineProperty方法。其接收三個(gè)參數(shù)：屬性所在的對(duì)象、屬性的名字和一個(gè)描述符對(duì)象，描述符對(duì)象的屬性必須是數(shù)據(jù)屬性的特性。

這個(gè)例子為 person 對(duì)象創(chuàng)建了名為 name 的屬性，它的值”younixiao”是只讀的。這個(gè)屬性的值是不能被修改的，如果嘗試為它指定新值，在非嚴(yán)格模式下，賦值操作將被忽略;在嚴(yán)格模式下，賦值操作將導(dǎo)致拋出錯(cuò)誤。

類(lèi)似的規(guī)則也適用于不可配置的屬性：

把[[configurable]] 設(shè)置為false，表示不能從對(duì)象中刪除該屬性。如果對(duì)這個(gè)屬性調(diào)用delete，在非嚴(yán)格模式下該屬性的刪除操作不會(huì)生效，在嚴(yán)格模式下會(huì)導(dǎo)致拋出錯(cuò)誤。一旦把屬性定義為不可配置，就不能再改為可配置。此時(shí)，如果再調(diào)用Object.defineProperty方法修改除[[Writable]] 之外的特性，都會(huì)導(dǎo)致錯(cuò)誤：

可以多次調(diào)用Object.defineProperty方法修改同一個(gè)屬性，但在把[[Configurable]] 特性設(shè)置為false之后就會(huì)有限制了。

在調(diào)用Object.defineProperty方法時(shí)，如果不指定，除[[Value]] 特性外的特性的默認(rèn)值都是false。

1.2訪問(wèn)器屬性

訪問(wèn)器屬性不包含數(shù)據(jù)值，它們包含一對(duì)getter和setter函數(shù)(這兩個(gè)函數(shù)都不是必須的)。在讀取訪問(wèn)器屬性時(shí)，會(huì)調(diào)用getter函數(shù)，這個(gè)函數(shù)負(fù)責(zé)返回有效的值;在寫(xiě)入訪問(wèn)器屬性時(shí)，會(huì)調(diào)用setter函數(shù)并傳入新值，這個(gè)函數(shù)負(fù)責(zé)如何處理數(shù)據(jù)。訪問(wèn)器屬性有以下四個(gè)特性：

• [[Configurable]]：表示能否通過(guò)delete刪除屬性從而新定義屬性，能否修改屬性的特性，或能否把屬性修改為訪問(wèn)器屬性，默認(rèn)為true。

• [[Enumerable]]：表示能否通過(guò)for-in循環(huán)返回屬性，默認(rèn)為true。

• [[Get]]：讀取屬性時(shí)調(diào)用的函數(shù)，默認(rèn)為undefined。

• [[Set]]：寫(xiě)入屬性時(shí)調(diào)用的函數(shù)，默認(rèn)為undefined。

訪問(wèn)器屬性不能直接定義，必須使用Object.defineProperty定義：

_year 前面的下劃線用于表示只能通過(guò)對(duì)象方法訪問(wèn)的屬性。

以上代碼創(chuàng)建了一個(gè) book 對(duì)象，并給它定義兩個(gè)默認(rèn)的屬性：_year 和 edition。year 的訪問(wèn)器屬性包含getter函數(shù)和setter函數(shù)。getter函數(shù)返回 _year 的值，setter函數(shù)通過(guò)計(jì)算得出 _year 和 edition 的值。這是訪問(wèn)器屬性的常見(jiàn)用法，即設(shè)置一個(gè)屬性的值會(huì)導(dǎo)致其他屬性發(fā)生變化。

只指定getter函數(shù)意味著屬性不可寫(xiě)，嘗試寫(xiě)入屬性會(huì)被忽略，在嚴(yán)格模式下此操作會(huì)拋出異常。

只指定setter函數(shù)意味著屬性不可讀，在非嚴(yán)格模式下回返回undefined，在嚴(yán)格模式下會(huì)拋出錯(cuò)誤

在舊的瀏覽器中創(chuàng)建訪問(wèn)器屬性可以使用defineGetter和defineSetter函數(shù)。

2定義多個(gè)屬性

使用Object.defineProperties定義多個(gè)屬性。這個(gè)方法接受連個(gè)對(duì)象參數(shù)，第一個(gè)對(duì)象是要添加和修改其屬性的對(duì)象，第二個(gè)對(duì)象的屬性與第一個(gè)對(duì)象中要添加或修改的屬性一一對(duì)應(yīng)：

以上代碼在 book 對(duì)象上定義了兩個(gè)數(shù)據(jù)屬性(_year 和 edition)和一個(gè)訪問(wèn)器屬性(year)。

3讀取屬性的特性

使用Object.getOwnPropertyDescriptor方法可以取得給定屬性的描述符。其接收兩個(gè)參數(shù)：屬性所在的對(duì)象和要讀取描述符的屬性名稱。返回值是一個(gè)對(duì)象，如果是訪問(wèn)器屬性，這個(gè)對(duì)象的屬性有configurable、enumerable、get 和set;如果是數(shù)據(jù)屬性這個(gè)對(duì)象的屬性則有configurable、enumerable、writable、value：

在 JavaScript 中，可以針對(duì)任何對(duì)象——包括 DOM 和 BOM，使用Object.getOwnPropertyDescriptor方法。

在本文中，我們學(xué)習(xí)整理了 JavaScript 中對(duì)象的屬性和特性。但是，JavaScript 不是必須得通過(guò)特性來(lái)組織一個(gè)屬性，它們主要是作為ECMAScript規(guī)范中定義的一個(gè)抽象操作。但有時(shí)候這些特性也會(huì)明確的出現(xiàn)在語(yǔ)言代碼中,比如在屬性描述符中。

作者簡(jiǎn)介：

趙業(yè)輝，14年畢業(yè)于南京信息工程大學(xué)，網(wǎng)絡(luò)媒體藝術(shù)專(zhuān)業(yè)。目前就職于達(dá)而觀信息科技(上海)有限公司，任職前端開(kāi)發(fā)工程師，負(fù)責(zé)大數(shù)據(jù)平臺(tái)的pc與webapp研發(fā)工作。曾在杭州數(shù)云信息技術(shù)有限公司任職前端工程師，參與了多個(gè)項(xiàng)目的前端工作。對(duì)web兼容性，前端性能提升，SEO，前端組件化開(kāi)發(fā)，響應(yīng)式設(shè)計(jì)以及主流前端框架有著豐富的實(shí)戰(zhàn)經(jīng)驗(yàn)。

注：本文由 達(dá)觀數(shù)據(jù) 投稿數(shù)據(jù)猿發(fā)布。

歡迎更多大數(shù)據(jù)企業(yè)、愛(ài)好者投稿數(shù)據(jù)猿，來(lái)稿請(qǐng)直接投遞至：tougao@datayuan.cn

來(lái)源：數(shù)據(jù)猿

收藏分享

聲明：數(shù)據(jù)猿尊重媒體行業(yè)規(guī)范，相關(guān)內(nèi)容都會(huì)注明來(lái)源與作者；轉(zhuǎn)載我們?cè)瓌?chuàng)內(nèi)容時(shí)，也請(qǐng)務(wù)必注明“來(lái)源：數(shù)據(jù)猿”與作者名稱，否則將會(huì)受到數(shù)據(jù)猿追責(zé)。