對(duì)象是 JavaScript 的數(shù)據(jù)類型。它將很多值（原始值或者其他對(duì)象）聚合在一起，可通過(guò)名字訪問(wèn)這些值，因此我們可以把它看成是從字符串到值的映射。對(duì)象是動(dòng)態(tài)的，可以隨時(shí)新增和刪除自有屬性。對(duì)象除了可以保持自有的屬性，還可以從一個(gè)稱為原型的對(duì)象繼承屬性，這種「原型式繼承（prototypal inheritance）」是 JavaScript 的核心特征。

對(duì)象最常見的用法是創(chuàng)建（create）、設(shè)置（set）、查找（query）、刪除（delete）、檢測(cè)（test）和枚舉（enumerate）它的屬性。

屬性包括名字和值。屬性名可以是包含空字符串在內(nèi)的任意字符串，但對(duì)象中不能存在兩個(gè)同名的屬性。值可以是任意 JavaScript 值，或者在 ECMAScript 5中可以是 getter 或 setter 函數(shù)。

除了名字和值之外，每個(gè)屬性還有一些與之相關(guān)的值，稱為「屬性特性（property attribute）」：

• 可寫（writable attribute），表明是否可以設(shè)置該屬性的值。
• 可枚舉（enumerable attribute），表明是否可以通過(guò) for-in 循環(huán)返回該屬性。
• 可配置（configurable attribute），表明是否可以刪除或修改該屬性。

在 ECMAScript 5之前，通過(guò)代碼給對(duì)象創(chuàng)建的所有屬性都是可寫的、可枚舉的和可配置的。在 ECMAScript 5中則可以對(duì)這些特性加以配置。

除了包含屬性特性之外，每個(gè)對(duì)象還擁有三個(gè)相關(guān)的「對(duì)象特性（object attribute）」：

• 對(duì)象的類（class），是一個(gè)標(biāo)識(shí)對(duì)象類型的字符串。
• 對(duì)象的原型（prototype），指向另外一個(gè)對(duì)象，本對(duì)象的屬性繼承自它的原型對(duì)象。
• 對(duì)象的擴(kuò)展標(biāo)記（extensible flag），指明了在 ECMAScript 5中是否可以向該對(duì)象添加新屬性。

最后，用下面術(shù)語(yǔ)來(lái)對(duì) JavaScript 的「三類對(duì)象」和「兩類屬性」進(jìn)行區(qū)分：

• 內(nèi)置對(duì)象（native object），是由 JavaScript 規(guī)范定義的對(duì)象或類。例如，數(shù)組、函數(shù)、日期和正則表達(dá)式都是內(nèi)置對(duì)象。
• 宿主對(duì)象（host object），是由 JavaScript 解釋器所嵌入的宿主環(huán)境（比如 Web 瀏覽器）定義的。客戶端 JavaScript 中表示網(wǎng)頁(yè)結(jié)構(gòu)的 HTMLElement 對(duì)象均是宿主對(duì)象。
• 自定義對(duì)象（user-defined object），是由運(yùn)行中的 JavaScript 代碼創(chuàng)建的對(duì)象。
• 自有屬性（own property），是直接在對(duì)象中定義的屬性。
• 繼承屬性（inherited property），是在對(duì)象的原型對(duì)象中定義的屬性。

創(chuàng)建對(duì)象

可以使用對(duì)象字面量、new 關(guān)鍵字和 ECMAScript 5中的 Object.create() 函數(shù)來(lái)創(chuàng)建對(duì)象。

使用對(duì)象字面量創(chuàng)建對(duì)象（推薦）

創(chuàng)建對(duì)象最簡(jiǎn)單的方式就是在 JavaScript 代碼中使用對(duì)象字面量。對(duì)象字面量是由若干名值對(duì)組成的映射表，名值對(duì)中間用冒號(hào)分隔，名值對(duì)之間用逗號(hào)分隔，整個(gè)映射表用花括號(hào)括起來(lái)。屬性名可以是 JavaScript 標(biāo)識(shí)符也可以是字符串直接量（包括空字符串）。屬性的值可以是任意類型的 JavaScript 表達(dá)式，表達(dá)式的值（可以是原始值也可以是對(duì)象值）就是這個(gè)屬性的值。例如：

// 推薦寫法
var person = {
    name : "stone",
    age : 28
};

// 也可以寫成
var person = {};
person.name = "stone";
person.age = 28;

使用 new 關(guān)鍵字創(chuàng)建對(duì)象

new 關(guān)鍵字創(chuàng)建并初始化一個(gè)新對(duì)象。關(guān)鍵字 new 后跟隨一個(gè)函數(shù)調(diào)用。這里的函數(shù)稱做構(gòu)造函數(shù)（constructor），構(gòu)造函數(shù)用以初始化一個(gè)新創(chuàng)建的對(duì)象。JavaScript 語(yǔ)言核心中的原始類型都包含內(nèi)置構(gòu)造函數(shù)。例如：

var person = new Object();
person.name = "stone";
person.age = 28;

其中 var person = new Object(); 等價(jià)于 var person = {}; 。

使用 Object.create() 函數(shù)創(chuàng)建對(duì)象

ECMAScript 5定義了一個(gè)名為 Object.create() 的方法，它創(chuàng)建一個(gè)新對(duì)象，其中第一個(gè)參數(shù)是這個(gè)對(duì)象的原型。Object.create() 提供第二個(gè)可選參數(shù)，用以對(duì)對(duì)象的屬性進(jìn)行進(jìn)一步描述。Object.create() 是一個(gè)靜態(tài)函數(shù)，而不是提供給某個(gè)對(duì)象調(diào)用的方法。使用它的方法很簡(jiǎn)單，只須傳入所需的原型對(duì)象即可。例如：

var person = Object.create(Object.prototype);
person.name = "stone";
person.age = 28;

其中 var person = Object.create(Object.prototype); 也等價(jià)于 var person = {}; 。

原型（prototype）

所有通過(guò)對(duì)象字面量創(chuàng)建的對(duì)象都具有同一個(gè)原型對(duì)象，并可以通過(guò) JavaScript 代碼 Object.prototype 獲得對(duì)原型對(duì)象的引用。通過(guò)關(guān)鍵字 new 和構(gòu)造函數(shù)調(diào)用創(chuàng)建的對(duì)象的原型就是構(gòu)造函數(shù)的 prototype 屬性的值。因此，同使用 {} 創(chuàng)建對(duì)象一樣，通過(guò) new Object() 創(chuàng)建的對(duì)象也繼承自 Object.prototype。同樣，通過(guò) new Array() 創(chuàng)建的對(duì)象的原型就是 Array.prototype，通過(guò) new Date() 創(chuàng)建的對(duì)象的原型就是 Date.prototype。

沒有原型的對(duì)象為數(shù)不多，Object.prototype 就是其中之一。它不繼承任何屬性。其他原型對(duì)象都是普通對(duì)象，普通對(duì)象都具有原型。所有的內(nèi)置構(gòu)造函數(shù)（以及大部分自定義的構(gòu)造函數(shù)）都具有一個(gè)繼承自 Object.prototype 的原型。例如，Date.prototype 的屬性繼承自 Object.prototype，因此由 new Date() 創(chuàng)建的 Date 對(duì)象的屬性同時(shí)繼承自 Date.prototype 和 Object.prototype。

這一系列鏈接的原型對(duì)象就是所謂的「原型鏈（prototype chain）」。

屬性的查詢和設(shè)置

前面有提到過(guò)，可以通過(guò)點(diǎn) . 或方括號(hào) [] 運(yùn)算符來(lái)獲取屬性的值。對(duì)于點(diǎn) . 來(lái)說(shuō)，左側(cè)應(yīng)當(dāng)是一個(gè)對(duì)象，右側(cè)必須是一個(gè)以屬性名稱命名的簡(jiǎn)單標(biāo)識(shí)符。對(duì)于方括號(hào)來(lái)說(shuō) [] ，方括號(hào)內(nèi)必須是一個(gè)計(jì)算結(jié)果為字符串的表達(dá)式，這個(gè)字符串就是屬性的名稱。例如：

// 推薦寫法
console.log(person.name);   // "stone"
console.log(person.age);    // "28"

// 也可以寫成
console.log(person["name"]);    // stone
console.log(person["age"]);     // 28

和獲取屬性的值寫法一樣，通過(guò)點(diǎn)和方括號(hào)也可以創(chuàng)建屬性或給屬性賦值，但需要將它們放在賦值表達(dá)式的左側(cè)。例如：

// 推薦寫法
person.name = "sophie"; // 賦值
person.age = 30;        // 賦值
person.weight = 38;     // 創(chuàng)建

// 也可以寫成
person["name"] = "sophie";  // 賦值
person["age"] = 30;         // 賦值
person["weight"] = 38;      // 創(chuàng)建

當(dāng)使用方括號(hào)時(shí)，方括號(hào)內(nèi)的表達(dá)式必須返回字符串。更嚴(yán)格地講，表達(dá)式必須返回字符串或返回一個(gè)可以轉(zhuǎn)換為字符串的值。

屬性的訪問(wèn)錯(cuò)誤

查詢一個(gè)不存在的屬性并不會(huì)報(bào)錯(cuò)，如果在對(duì)象 o 自身的屬性或繼承的屬性中均未找到屬性 x，屬性訪問(wèn)表達(dá)式 o.x 返回 undefined。例如：

var person = {};
person.wife;    // undefined

但是，如果對(duì)象不存在，那么試圖查詢這個(gè)不存在的對(duì)象的屬性就會(huì)報(bào)錯(cuò)。null 和 undefined 值都沒有屬性，因此查詢這些值的屬性會(huì)報(bào)錯(cuò)。例如：

var person = {};
person.wife.name;   // Uncaught TypeError: Cannot read property 'name' of undefined.

除非確定 person 和 person.wife 都是對(duì)象，否則不能這樣寫表達(dá)式 person.wife.name，因?yàn)闀?huì)報(bào)「未捕獲的錯(cuò)誤類型」，下面提供了兩種避免出錯(cuò)的方法：

// 冗余但易懂的寫法
var name;
if (person) {
    if (person.wife) 
        name = person.wife.name;
}

// 簡(jiǎn)練又常用的寫法（推薦寫法）
var name = person && person.wife && person.wife.name;

刪除屬性

delete 運(yùn)算符用來(lái)刪除對(duì)象屬性，事實(shí)上 delete 只是斷開屬性和宿主對(duì)象的聯(lián)系，并沒有真正的刪除它。delete 運(yùn)算符只能刪除自有屬性，不能刪除繼承屬性（要?jiǎng)h除繼承屬性必須從定義這個(gè)屬性的原型對(duì)象上刪除它，而且這會(huì)影響到所有繼承自這個(gè)原型的對(duì)象）。

代碼范例，請(qǐng)參見「變量和數(shù)據(jù)類型」-「數(shù)據(jù)類型」-「delete 運(yùn)算符」。

檢測(cè)屬性

JavaScript 對(duì)象可以看做屬性的集合，我們經(jīng)常會(huì)檢測(cè)集合中成員的所屬關(guān)系（判斷某個(gè)屬性是否存在于某個(gè)對(duì)象中）。可以通過(guò) in 運(yùn)算符、hasOwnPreperty() 和 propertyIsEnumerable() 來(lái)完成這個(gè)工作，甚至僅通過(guò)屬性查詢也可以做到這一點(diǎn)。

in 運(yùn)算符的左側(cè)是屬性名（字符串），右側(cè)是對(duì)象。如果對(duì)象的自有屬性或繼承屬性中包含這個(gè)屬性則返回 true。例如：

var o = { x: 1 }
console.log("x" in o);          // true，x是o的屬性
console.log("y" in o);          // false，y不是o的屬性
console.log("toString" in o);   // true，toString是繼承屬性

對(duì)象的 hasOwnProperty() 方法用來(lái)檢測(cè)給定的名字是否是對(duì)象的自有屬性。對(duì)于繼承屬性它將返回 false。例如：

var o = { x: 1 }
console.log(o.hasOwnProperty("x"));          // true，x是o的自有屬性
console.log(o.hasOwnProperty("y"));          // false，y不是o的屬性
console.log(o.hasOwnProperty("toString"));   // false，toString是繼承屬性

propertyIsEnumerable() 是 hasOwnProperty() 的增強(qiáng)版，只有檢測(cè)到是自有屬性且這個(gè)屬性的可枚舉性（enumerable attribute）為 true 時(shí)它才返回 true。某些內(nèi)置屬性是不可枚舉的。通常由 JavaScript 代碼創(chuàng)建的屬性都是可枚舉的，除非在 ECMAScript 5中使用一個(gè)特殊的方法來(lái)改變屬性的可枚舉性。例如：

var o = inherit({ y: 2 });
o.x = 1;
o.propertyIsEnumerable("x");    // true:，x是o的自有屬性，可枚舉
o.propertyIsEnumerable("y");    // false，y是繼承屬性
Object.prototype.propertyIsEnumerable("toString");  // false，不可枚舉

除了使用 in 運(yùn)算符之外，另一種更簡(jiǎn)便的方法是使用 !== 判斷一個(gè)屬性是否是 undefined。例如：

var o = { x: 1 }
console.log(o.x !== undefined);              // true，x是o的屬性
console.log(o.y !== undefined);              // false，y不是o的屬性
console.log(o.toString !== undefined);       // true，toString是繼承屬性

然而有一種場(chǎng)景只能使用 in 運(yùn)算符而不能使用上述屬性訪問(wèn)的方式。in 可以區(qū)分不存在的屬性和存在但值為 undefined 的屬性。例如：

var o = { x: undefined }        // 屬性被顯式賦值為undefined
console.log(o.x !== undefined); // false，屬性存在，但值為undefined
console.log(o.y !== undefined); // false，屬性不存在
console.log("x" in o);          // true，屬性存在
console.log("y" in o);          // false，屬性不存在
console.log(delete o.x);        // true，刪除了屬性x
console.log("x" in o);          // false，屬性不再存在

擴(kuò)展閱讀「JavaScript 檢測(cè)原始值、引用值、屬性」
http://shijiajie.com/2016/06/20/javascript-maintainable-javascript-validate1/

擴(kuò)展閱讀「JavaScript 檢測(cè)之 basevalidate.js」
http://shijiajie.com/2016/06/25/javascript-maintainable-javascript-basevalidatejs/

枚舉屬性

除了檢測(cè)對(duì)象的屬性是否存在，我們還會(huì)經(jīng)常遍歷對(duì)象的屬性。通常使用 for-in 循環(huán)遍歷，ECMAScript 5提供了兩個(gè)更好用的替代方案。

for-in 循環(huán)可以在循環(huán)體中遍歷對(duì)象中所有可枚舉的屬性（包括自有屬性和繼承的屬性），把屬性名稱賦值給循環(huán)變量。對(duì)象繼承的內(nèi)置方法不可枚舉的，但在代碼中給對(duì)象添加的屬性都是可枚舉的。例如：

var o = {x:1, y:2, z:3};            // 三個(gè)可枚舉的自有屬性
o.propertyIsEnumerable("toString"); // false，不可枚舉
for (p in o) {          // 遍歷屬性
    console.log(p);     // 輸出x、y和z，不會(huì)輸出toString
}

有許多實(shí)用工具庫(kù)給 Object.prototype 添加了新的方法或?qū)傩裕@些方法和屬性可以被所有對(duì)象繼承并使用。然而在ECMAScript 5標(biāo)準(zhǔn)之前，這些新添加的方法是不能定義為不可枚舉的，因此它們都可以在 for-in 循環(huán)中枚舉出來(lái)。為了避免這種情況，需要過(guò)濾 for-in 循環(huán)返回的屬性，下面兩種方式是最常見的：

for(p in o) {
   if (!o.hasOwnProperty(p)) continue;          // 跳過(guò)繼承的屬性
   if (typeof o[p] === "function") continue;    // 跳過(guò)方法
}

除了 for-in 循環(huán)之外，ECMAScript 5定義了兩個(gè)用以枚舉屬性名稱的函數(shù)。第一個(gè)是 Object.keys()，它返回一個(gè)數(shù)組，這個(gè)數(shù)組由對(duì)象中可枚舉的自有屬性的名稱組成。第二個(gè)是 Object.getOwnPropertyNames()，它和 Ojbect.keys() 類似，只是它返回對(duì)象的所有自有屬性的名稱，而不僅僅是可枚舉的屬性。在ECMAScript 3中是無(wú)法實(shí)現(xiàn)的類似的函數(shù)的，因?yàn)镋CMAScript 3中沒有提供任何方法來(lái)獲取對(duì)象不可枚舉的屬性。

屬性的 getter 和 setter

我們知道，對(duì)象屬性是由名字、值和一組特性（attribute）構(gòu)成的。在ECMAScript 5中，屬性值可以用一個(gè)或兩個(gè)方法替代，這兩個(gè)方法就是 getter 和 setter。由 getter 和 setter 定義的屬性稱做「存取器屬性（accessor property）」，它不同于「數(shù)據(jù)屬性（data property）」，數(shù)據(jù)屬性只有一個(gè)簡(jiǎn)單的值。

當(dāng)程序查詢存取器屬性的值時(shí)，JavaScript 調(diào)用 getter 方法。這個(gè)方法的返回值就是屬性存取表達(dá)式的值。當(dāng)程序設(shè)置一個(gè)存取器屬性的值時(shí)，JavaScript 調(diào)用 setter 方法，將賦值表達(dá)式右側(cè)的值當(dāng)做參數(shù)傳入 setter。從某種意義上講，這個(gè)方法負(fù)責(zé)「設(shè)置」屬性值。可以忽略 setter 方法的返回值。

和數(shù)據(jù)屬性不同，存取器屬性不具有可寫性（writable attribute）。如果屬性同時(shí)具有 getter 和 setter 方法，那么它是一個(gè)讀/寫屬性。如果它只有 getter 方法，那么它是一個(gè)只讀屬性。如果它只有 setter 方法，那么它是一個(gè)只寫屬性，讀取只寫屬性總是返回 undefined。定義存取器屬性最簡(jiǎn)單的方法是使用對(duì)象直接量語(yǔ)法的一種擴(kuò)展寫法。例如：

var o = {
    // 普通的數(shù)據(jù)屬性
    data_prop: value,

    // 存取器屬性都是成對(duì)定義的函數(shù)
    get accessor_prop() { /*這里是函數(shù)體 */ },
    set accessor_prop(value) { /* 這里是函數(shù)體*/ }
};

存取器屬性定義為一個(gè)或兩個(gè)和屬性同名的函數(shù)，這個(gè)函數(shù)定義沒有使用 function 關(guān)鍵字，而是使用 get 或 set。注意，這里沒有使用冒號(hào)將屬性名和函數(shù)體分隔開，但在函數(shù)體的結(jié)束和下一個(gè)方法或數(shù)據(jù)屬性之間有逗號(hào)分隔。

序列化對(duì)象（JSON）

對(duì)象序列化（serialization）是指將對(duì)象的狀態(tài)轉(zhuǎn)換為字符串，也可將字符串還原為對(duì)象。ECMAScript 5提供了內(nèi)置函數(shù) JSON.stringify() 和 JSON.parse() 用來(lái)序列化和還原 JavaScript 對(duì)象。這些方法都使用 JSON 作為數(shù)據(jù)交換格式，JSON 的全稱是「JavaScript 對(duì)象表示法（JavaScript Object Notation）」，它的語(yǔ)法和 JavaScript 對(duì)象與數(shù)組直接量的語(yǔ)法非常相近。例如：

o = {x:1, y:{z:[false,null,""]}};       // 定義一個(gè)對(duì)象
s = JSON.stringify(o);                  // s是 '{"x":1,"y":{"z":[false,null,""]}}'
p = JSON.parse(s);                      // p是o的深拷貝

ECMAScript 5中的這些函數(shù)的本地實(shí)現(xiàn)和 https://github.com/douglascrockford/JSON-js 中的公共域ECMAScript 3版本的實(shí)現(xiàn)非常類似，或者說(shuō)完全一樣，因此可以通過(guò)引入 json2.js 模塊在ECMAScript 3的環(huán)境中使用ECMAScript 5中的這些函數(shù)。

JSON 的語(yǔ)法是 JavaScript 語(yǔ)法的子集，它并不能表示 JavaScript 里的所有值。它支持對(duì)象、數(shù)組、字符串、無(wú)窮大數(shù)字、true、false 和 null，可以序列化和還原它們。NaN、Infinity 和 -Infinity 序列化的結(jié)果是 null，日期對(duì)象序列化的結(jié)果是 ISO 格式的日期字符串（參照 Date.toJSON() 函數(shù)），但 JSON.parse() 依然保留它們的字符串形態(tài)，而不會(huì)將它們還原為原始日期對(duì)象。函數(shù)、RegExp、Error 對(duì)象和 undefined 值不能序列化和還原。JSON.stringify() 只能序列化對(duì)象可枚舉的自有屬性。對(duì)于一個(gè)不能序列化的屬性來(lái)說(shuō)，在序列化后的輸出字符串中會(huì)將這個(gè)屬性省略掉。JSON.stringify() 和 JSON.parse() 都可以接收第二個(gè)可選參數(shù)，通過(guò)傳入需要序列化或還原的屬性列表來(lái)定制自定義的序列化或還原操作。

關(guān)卡

請(qǐng)實(shí)現(xiàn)下面用來(lái)枚舉屬性的對(duì)象工具函數(shù)：

/*
 * 把 p 中的可枚舉屬性復(fù)制到 o 中，并返回 o
 * 如果 o 和 p 中含有同名屬性，則覆蓋 o 中的屬性
 */
function extend(o, p) {
    // 請(qǐng)實(shí)現(xiàn)函數(shù)體
}

/*
 * 將 p 中的可枚舉屬性復(fù)制至 o 中，并返回 o
 * 如果 o 和 p 中有同名的屬性，o 中的屬性將不受影響
 */
function merge(o, p) {
    // 請(qǐng)實(shí)現(xiàn)函數(shù)體
}

/*
 * 如果 o 中的屬性在 p 中沒有同名屬性，則從 o 中刪除這個(gè)屬性
 * 返回 o
 */
function restrict(o, p) {
    // 請(qǐng)實(shí)現(xiàn)函數(shù)體
}

/*
 * 如果 o 中的屬性在 p 中存在同名屬性，則從 o 中刪除這個(gè)屬性
 * 返回 o
 */
function subtract(o, p) {
    // 請(qǐng)實(shí)現(xiàn)函數(shù)體
}

/*
 * 返回一個(gè)新對(duì)象，這個(gè)對(duì)象同時(shí)擁有 o 的屬性和 p 的屬性
 * 如果 o 和 p 中有重名屬性，使用 p 中的屬性值
 */
function union(o, p) { 
    // 請(qǐng)實(shí)現(xiàn)函數(shù)體
}

/*
 * 返回一個(gè)新對(duì)象，這個(gè)對(duì)象擁有同時(shí)在 o 和 p 中出現(xiàn)的屬性
 * 很像求 o 和 p 的交集，但 p 中屬性的值被忽略
 */
function intersection(o, p) { 
    // 請(qǐng)實(shí)現(xiàn)函數(shù)體
}

/*
 * 返回一個(gè)數(shù)組，這個(gè)數(shù)組包含的是 o 中可枚舉的自有屬性的名字
 */
function keys(o) {
    // 請(qǐng)實(shí)現(xiàn)函數(shù)體
}

更多

關(guān)注微信公眾號(hào)「劼哥舍」回復(fù)「答案」，獲取關(guān)卡詳解。
關(guān)注 https://github.com/stone0090/javascript-lessons，獲取最新動(dòng)態(tài)。