[TOC] # 創建對象 JavaScript對每個創建的對象都會設置一個原型，指向它的原型對象。 當我們用`obj.xxx`訪問一個對象的屬性時，JavaScript引擎先在當前對象上查找該屬性，如果沒有找到，就到其原型對象上找，如果還沒有找到，就一直上溯到`Object.prototype`對象，最后，如果還沒有找到，就只能返回`undefined`。 例如，創建一個`Array`對象： ~~~ var arr = [1, 2, 3]; ~~~ 其原型鏈是： ~~~ arr ----> Array.prototype ----> Object.prototype ----> null ~~~ `Array.prototype`定義了`indexOf()`、`shift()`等方法，因此你可以在所有的`Array`對象上直接調用這些方法。 當我們創建一個函數時： ~~~ function foo() { return 0; } ~~~ 函數也是一個對象，它的原型鏈是： ~~~ foo ----> Function.prototype ----> Object.prototype ----> null ~~~ 由于`Function.prototype`定義了`apply()`等方法，因此，所有函數都可以調用`apply()`方法。 很容易想到，如果原型鏈很長，那么訪問一個對象的屬性就會因為花更多的時間查找而變得更慢，因此要注意不要把原型鏈搞得太長。 # 構造函數 除了直接用`{ ... }`創建一個對象外，JavaScript還可以用一種構造函數的方法來創建對象。它的用法是，先定義一個構造函數： ~~~ function Student(name) { this.name = name; this.hello = function () { alert('Hello, ' + this.name + '!'); } } ~~~ 你會問，咦，這不是一個普通函數嗎？ 這確實是一個普通函數，但是在JavaScript中，可以用關鍵字`new`來調用這個函數，并返回一個對象： ~~~ var xiaoming = new Student('小明'); xiaoming.name; // '小明' xiaoming.hello(); // Hello, 小明! ~~~ > *注意*，如果不寫`new`，這就是一個普通函數，它返回`undefined`（因為沒有返回值）。但是，如果寫了`new`，它就變成了一個構造函數，它綁定的`this`指向新創建的對象，并默認返回`this`，也就是說，不需要在最后寫`return this;`。 新創建的`xiaoming`的原型鏈是： ~~~ xiaoming ----> Student.prototype ----> Object.prototype ----> null ~~~ 也就是說，`xiaoming`的原型指向函數`Student`的原型。如果你又創建了`xiaohong`、`xiaojun`，那么這些對象的原型與`xiaoming`是一樣的： ~~~ xiaoming ↘ xiaohong -→ Student.prototype ----> Object.prototype ----> null xiaojun ↗ ~~~ 用`new Student()`創建的對象還從原型上獲得了一個`constructor`屬性，它指向函數`Student`本身： ~~~js xiaoming.constructor === Student.prototype.constructor; // true Student.prototype.constructor === Student; // true Object.getPrototypeOf(xiaoming) === Student.prototype; // true xiaoming instanceof Student; // true ~~~ 另外，函數`Student`恰好有個屬性`prototype`指向`xiaoming`、`xiaohong`的原型對象，但是`xiaoming`、`xiaohong`這些對象可沒有`prototype`這個屬性，不過可以用`__proto__`這個非標準用法來查看。 現在我們就認為`xiaoming`、`xiaohong`這些對象“繼承”自`Student`。 ## 創建方法 注意觀察： ~~~js xiaoming.name; // '小明' xiaohong.name; // '小紅' xiaoming.hello; // function: Student.hello() xiaohong.hello; // function: Student.hello() xiaoming.hello === xiaohong.hello; // false ~~~ `xiaoming`和`xiaohong`各自的`name`不同，這是對的，否則我們無法區分誰是誰了。 `xiaoming`和`xiaohong`各自的`hello`是一個函數，但它們是兩個不同的函數，雖然函數名稱和代碼都是相同的！ 如果我們通過`new Student()`創建了很多對象，這些對象的`hello`函數實際上只需要共享同一個函數就可以了，這樣可以節省很多內存。 要讓創建的對象共享一個`hello`函數，根據對象的屬性查找原則，我們只要把`hello`函數移動到`xiaoming`、`xiaohong`這些對象共同的原型上就可以了，也就是`Student.prototype`。 修改代碼如下： ~~~js function Student(name) { this.name = name; } Student.prototype.hello = function () { alert('Hello, ' + this.name + '!'); }; ~~~ 用`new`創建基于原型的JavaScript的對象就是這么簡單！ # 忘記寫new怎么辦 如果一個函數被定義為用于創建對象的構造函數，但是調用時忘記了寫`new`怎么辦？ 在strict模式下，`this.name = name`將報錯，因為`this`綁定為`undefined`，在非strict模式下，`this.name = name`不報錯，因為`this`綁定為`window`，于是無意間創建了全局變量`name`，并且返回`undefined`，這個結果更糟糕。 所以，調用構造函數千萬不要忘記寫`new`。為了區分普通函數和構造函數，按照約定，構造函數首字母應當大寫，而普通函數首字母應當小寫，這樣，一些語法檢查工具如[jslint](http://www.jslint.com/)將可以幫你檢測到漏寫的`new`。 最后，我們還可以編寫一個`createStudent()`函數，在內部封裝所有的`new`操作。一個常用的編程模式像這樣： ~~~js function Student(props) { this.name = props.name || '匿名'; // 默認值為'匿名' this.grade = props.grade || 1; // 默認值為1 } Student.prototype.hello = function () { alert('Hello, ' + this.name + '!'); }; function createStudent(props) { return new Student(props || {}) } ~~~ 這個`createStudent()`函數有幾個巨大的優點：一是不需要`new`來調用，二是參數非常靈活，可以不傳，也可以這么傳： ~~~js var xiaoming = createStudent({ name: '小明' }); xiaoming.grade; // 1 ~~~ 如果創建的對象有很多屬性，我們只需要傳遞需要的某些屬性，剩下的屬性可以用默認值。由于參數是一個Object，我們無需記憶參數的順序。如果恰好從`JSON`拿到了一個對象，就可以直接創建出`xiaoming`。 # 練習 請利用構造函數定義`Cat`，并讓所有的Cat對象有一個`name`屬性，并共享一個方法`say()`，返回字符串`'Hello, xxx!'`： ~~~js 'use strict'; function Cat(name) { // } // 測試: var kitty = new Cat('Kitty'); var doraemon = new Cat('哆啦A夢'); if (kitty && kitty.name === 'Kitty' && kitty.say && typeof kitty.say === 'function' && kitty.say() === 'Hello, Kitty!' && kitty.say === doraemon.say) { alert('測試通過!'); } else { alert('測試失敗!'); } ~~~