深入理解 JavaScript 對(duì)象的特性與最佳實(shí)踐

JavaScript 的簡(jiǎn)單數(shù)據(jù)類型是數(shù)字、字符串浴骂、布爾值(true/false)钱磅、null 以及 undefined巩踏,其它所有的值都是對(duì)象。這些對(duì)象是可變的鍵值對(duì)集合续搀。

對(duì)象是屬性的容器塞琼,每個(gè)屬性都有名字和值。屬性的名字可以是包含空字符串在內(nèi)的任何字符串禁舷,而屬性值是除 undefined 值之外的任意值彪杉。

對(duì)象是無(wú)類型的毅往,它對(duì)屬性的名字和值沒(méi)有類型限制。所以對(duì)象很適合匯集和管理數(shù)據(jù)派近。對(duì)象可以包含其他對(duì)象攀唯,所以可以很容易地表示成樹(shù)狀或圖形數(shù)據(jù)結(jié)構(gòu)。

使用原型鏈渴丸,可以讓一個(gè)對(duì)象繼承另一個(gè)對(duì)象的屬性侯嘀。合理地使用這一特性,可以減少初始化對(duì)象所消耗的內(nèi)存和時(shí)間谱轨。

1 對(duì)象字面量

對(duì)象字面量是包圍在一對(duì)花括號(hào)中的零或多個(gè)名值對(duì)戒幔,它可以出現(xiàn)在任何允許表達(dá)式出現(xiàn)的地方:

var empty_object = {};

var stooge = {
    "first-name": "deniro",
    "last-name": "Li"
};

屬性的名字可以是包含空字符串在內(nèi)的任何字符串。如果屬性名是合法的 JavaScript 標(biāo)識(shí)符土童,則可以不加引號(hào)诗茎。逗號(hào)用來(lái)分隔多個(gè)名值對(duì)。

屬性值可以是任意的表達(dá)式(包括另一個(gè)對(duì)象字面量)献汗,即對(duì)象是可潛逃的:

var flight = {
    airline: "Oceanic",
    number: 815,
    departure: {
        IATA: "SYD",
        time: "2017-08-02 19:00",
        city: "Sydney"
    },
    arrival: {
        IATA: "LAX",
        time: "2017-08-03 21:37",
        city: "Los Angeles"
    }
};

2 檢索

可以使用 [ ] 語(yǔ)法來(lái)獲取對(duì)象的值敢订。如果字符串表達(dá)式是一個(gè)字符串字面量,而且它又是一個(gè)合法的 JavaScript 標(biāo)識(shí)符罢吃,那么也可以使用 . 語(yǔ)法楚午。優(yōu)先使用 . 語(yǔ)法,因?yàn)樗o湊尿招,而且可讀性更好:

console.log(stooge["first-name"]);//"deniro"
console.log(flight.departure.IATA);//"SYD"(優(yōu)先考慮 . 表示法)

如果要檢索的屬性的值不存在矾柜,會(huì)返回 undefined:

console.log(stooge["middle-name"]);
console.log(flight.status);
console.log(stooge["FIRST-NAME"]);

|| 運(yùn)算符可用來(lái)填充默認(rèn)值:

console.log(stooge["middle-name"] || "(none)");//(none)
console.log(flight.status || "unknown");//unknown

從 undefined 的屬性中取值會(huì)拋出 TypeError 異常,我們可以使用 && 來(lái)避免這個(gè)問(wèn)題:

console.log(flight.equipment);//undefined
//console.log(flight.equipment.model);//拋出 TypeError
console.log(flight.equipment && flight.equipment.model);//undefined

3 更新

可以通過(guò)賦值語(yǔ)句來(lái)更新對(duì)象的值泊业。如果屬性名已存在于對(duì)象中把沼,那么屬性的值就會(huì)被替換:

stooge["first-name"] = "lily";
console.log(stooge["first-name"]);//"lily"

如果對(duì)象之前沒(méi)有這個(gè)屬性啊易,那么這個(gè)新屬性就會(huì)被擴(kuò)充到對(duì)象中:

stooge["middle-name"] = "Song";
console.log(stooge["middle-name"]);//"Song"
stooge.nickname = "Deniro";
console.log(stooge.nickname);//"Deniro"
flight.equipment = {
    model: "Boeiing 787"
};
console.log(flight.equipment.model);//"Boeiing 787"
flight.status = "overdue";
console.log(flight.status);//"overdue"

4 引用

對(duì)象是通過(guò)引用來(lái)傳遞的吁伺,所以它們永遠(yuǎn)不會(huì)被復(fù)制:

var x = stooge;
x.nickname = "Lucy";
console.log(stooge.nickname);//"Lucy";x 與 stooge 指向同一個(gè)引用

var a = {}, b = {}, c = {};//a租谈、b篮奄、c 引用一個(gè)不同的空對(duì)象
a = b = c = {};//a、b割去、c 引用同一個(gè)空對(duì)象

5 原型

每個(gè)對(duì)象都連接到一個(gè)原型對(duì)象窟却,然后繼承原型對(duì)象的屬性。所有通過(guò)對(duì)象字面量創(chuàng)建的對(duì)象都連接到 Object.prototype呻逆,它是標(biāo)配對(duì)象夸赫。

創(chuàng)建一個(gè)新對(duì)象時(shí),可以指定某個(gè)對(duì)象作為它的原型咖城。我們?yōu)?Object 新增一個(gè) create 方法茬腿,它會(huì)創(chuàng)建并返回一個(gè)使用原對(duì)象作為原型對(duì)象的新對(duì)象:

if (typeof Object.beget !== "function") {
    Object.create = function (o) {
        var F = function () {
        };
        F.prototype = o;
        return new F();
    }
}

var another_stooge = Object.create(stooge);

更新某個(gè)對(duì)象時(shí)呼奢,是不會(huì)更新原型對(duì)象的:

another_stooge["first-name"] = "Jack";
console.log(another_stooge["first-name"]);//"Jack"
console.log(stooge["first-name"]);//"lily"

只有在檢索的時(shí)候,才會(huì)用到原型對(duì)象切平。如果沒(méi)有在對(duì)象中檢索到某個(gè)屬性握础,那么 JavaScript 就會(huì)試著從原型對(duì)象中獲取屬性值,如果還是沒(méi)有找到悴品,JavaScript 就會(huì)沿著原型鏈向上回溯禀综,直到 Object。如果都不存在苔严,就會(huì)返回 undefined定枷。

原型關(guān)系是動(dòng)態(tài)的關(guān)系。如果我們新增一個(gè)屬性到原型鏈中邦蜜,那么這個(gè)屬性就會(huì)立即對(duì)所有基于該原型所創(chuàng)建的對(duì)象可見(jiàn):

stooge.profession = "actor";
console.log(another_stooge.profession);//"actor"

6 反射

typeof 操作符有助于確定屬性的類型:

console.log(typeof flight.number);//number
console.log(typeof flight.status);//string
console.log(typeof flight.arrival);//object
console.log(typeof flight.manifest);//undefined

注意原型鏈中的任何屬性都會(huì)產(chǎn)生值:

console.log(typeof flight.toString);//function
console.log(typeof flight.constructor);//function

有兩種方法可以去除這些屬性:

  1. 檢查并丟棄值為函數(shù)的屬性依鸥。
  2. 使用 hasOwnProperty 方法,如果對(duì)象擁有獨(dú)有的屬性悼沈,它就會(huì)返回 true:
console.log(flight.hasOwnProperty("number"));//true
console.log(flight.hasOwnProperty("constructor"));//false

7 枚舉

for in 語(yǔ)句會(huì)遍歷一個(gè)對(duì)象中的所有屬性名贱迟,所以要過(guò)濾掉那些你不想要的屬性:

var name;
for (name in another_stooge) {
    if (typeof  another_stooge[name] !== 'function') {//過(guò)濾掉函數(shù)
        document.writeln(name + ': ' + another_stooge[name] + "; ");
    }
}

屬性名出現(xiàn)的順序是不確定的。如果要讓屬性以特定的順序出現(xiàn)絮供,就要?jiǎng)?chuàng)建一個(gè)包含特定屬性名的數(shù)組:

var i;
var properties = [
    "first-name",
    "middle-name",
    "last-name",
    'profession'
];//定義想要的屬性以及屬性順序
for (i = 0; i < properties.length; i += 1) {
    document.writeln(properties[i] + ": " + another_stooge[properties[i]] + "; ");
}

7 刪除

delete 運(yùn)算符會(huì)刪除對(duì)象的屬性衣吠,但它不會(huì)涉及原型鏈中的任何對(duì)象。

刪除對(duì)象的屬性可能會(huì)讓來(lái)自原型鏈的屬性呈現(xiàn)出來(lái):

another_stooge.nickname = "Jack";
console.log(another_stooge.nickname);//Jack
delete another_stooge.nickname;
console.log(another_stooge.nickname);//Lucy

8 減少全局變量的污染

全局變量削弱了程序的靈活性壤靶,所以要避免使用缚俏。

只創(chuàng)建一個(gè)唯一的全局變量:

var MYAPP = {};

這個(gè)變量就變成我們應(yīng)用的容器:

MYAPP.stooge = {
    "first-name": "deniro",
    "last-name": "Li"
};

MYAPP.flight = {
    airline: "Oceanic",
    number: 815,
    departure: {
        IATA: "SYD",
        time: "2017-08-02 19:00",
        city: "Sydney"
    },
    arrival: {
        IATA: "LAX",
        time: "2017-08-03 21:37",
        city: "Los Angeles"
    }
};

要把全局性的資源都納入一個(gè)命名空間下,這樣我們的程序與其他類庫(kù)發(fā)生沖突的可能性會(huì)顯著降低贮乳,而且程序也變得更易閱讀忧换。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市向拆,隨后出現(xiàn)的幾起案子亚茬,更是在濱河造成了極大的恐慌,老刑警劉巖浓恳,帶你破解...
    沈念sama閱讀 210,978評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件刹缝,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡颈将,警方通過(guò)查閱死者的電腦和手機(jī)梢夯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)晴圾,“玉大人颂砸,你說(shuō)我怎么就攤上這事。” “怎么了人乓?”我有些...
    開(kāi)封第一講書(shū)人閱讀 156,623評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵梗醇,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我撒蟀,道長(zhǎng)叙谨,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,324評(píng)論 1 282
  • 正文 為了忘掉前任保屯,我火速辦了婚禮手负,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘姑尺。我一直安慰自己竟终,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,390評(píng)論 5 384
  • 文/花漫 我一把揭開(kāi)白布切蟋。 她就那樣靜靜地躺著统捶,像睡著了一般。 火紅的嫁衣襯著肌膚如雪柄粹。 梳的紋絲不亂的頭發(fā)上喘鸟,一...
    開(kāi)封第一講書(shū)人閱讀 49,741評(píng)論 1 289
  • 那天,我揣著相機(jī)與錄音驻右,去河邊找鬼什黑。 笑死,一個(gè)胖子當(dāng)著我的面吹牛堪夭,可吹牛的內(nèi)容都是我干的愕把。 我是一名探鬼主播,決...
    沈念sama閱讀 38,892評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼森爽,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼恨豁!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起爬迟,我...
    開(kāi)封第一講書(shū)人閱讀 37,655評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤橘蜜,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后雕旨,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體扮匠,經(jīng)...
    沈念sama閱讀 44,104評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡捧请,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評(píng)論 2 325
  • 正文 我和宋清朗相戀三年凡涩,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片疹蛉。...
    茶點(diǎn)故事閱讀 38,569評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡活箕,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出可款,到底是詐尸還是另有隱情育韩,我是刑警寧澤克蚂,帶...
    沈念sama閱讀 34,254評(píng)論 4 328
  • 正文 年R本政府宣布,位于F島的核電站筋讨,受9級(jí)特大地震影響埃叭,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜悉罕,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,834評(píng)論 3 312
  • 文/蒙蒙 一赤屋、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧壁袄,春花似錦类早、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,725評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至栈顷,卻和暖如春逆日,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背萄凤。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,950評(píng)論 1 264
  • 我被黑心中介騙來(lái)泰國(guó)打工屏富, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人蛙卤。 一個(gè)月前我還...
    沈念sama閱讀 46,260評(píng)論 2 360
  • 正文 我出身青樓狠半,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親颤难。 傳聞我的和親對(duì)象是個(gè)殘疾皇子神年,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,446評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • 第5章 引用類型(返回首頁(yè)) 本章內(nèi)容 使用對(duì)象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類型 使用基本類型...
    大學(xué)一百閱讀 3,216評(píng)論 0 4
  • 函數(shù)用于指定對(duì)象的行為。所謂的編程行嗤,就是將一組需求分解為一組函數(shù)和數(shù)據(jù)結(jié)構(gòu)的技能已日。 1 函數(shù)對(duì)象 JavaScri...
    deniro閱讀 292評(píng)論 0 2
  • 作者:clearbug原文地址:http://www.cnblogs.com/craftsman-gao/p/48...
    IT程序獅閱讀 786評(píng)論 1 8
  • 你只身離開(kāi)很突然 不知道你去了哪個(gè)地方 我措手不及 后來(lái)你告訴我說(shuō) 你是喜歡南城的日光 所以你決定去追尋它 我不知...
    飛天騎小馬扎閱讀 187評(píng)論 0 1
  • 《使命召喚系列》是我非常喜歡的一款游戲飘千,其中最愛(ài)現(xiàn)代戰(zhàn)爭(zhēng)系列!不是因?yàn)槲蚁矚g暴力和武器栈雳,而是因?yàn)槲蚁塍w驗(yàn)作為軍人...
    幽靈影子閱讀 662評(píng)論 0 1