文章轉(zhuǎn)載自:廖雪峰的官方網(wǎng)站(方便個(gè)人學(xué)習(xí))

JavaScript對每個(gè)創(chuàng)建的對象都會設(shè)置一個(gè)原型柑土，指向它的原型對象镇眷。

當(dāng)我們用obj.xxx訪問一個(gè)對象的屬性時(shí)羊始，JavaScript引擎先在當(dāng)前對象上查找該屬性谱俭，如果沒有找到帮匾，就到其原型對象上找啄骇，如果還沒有找到，就一直上溯到Object.prototype對象瘟斜，最后缸夹，如果還沒有找到痪寻，就只能返回undefined。

例如虽惭，創(chuàng)建一個(gè)Array對象：

vararr = [1,2,3];

其原型鏈?zhǔn)牵?/p>

arr ---->Array.prototype ----> Object.prototype ---->null

Array.prototype定義了indexOf()橡类、shift()等方法，因此你可以在所有的Array對象上直接調(diào)用這些方法芽唇。

當(dāng)我們創(chuàng)建一個(gè)函數(shù)時(shí)：

functionfoo(){return0;}

函數(shù)也是一個(gè)對象顾画，它的原型鏈?zhǔn)牵?/p>

foo ----> Function.prototype ----> Object.prototype ---->null

由于Function.prototype定義了apply()等方法，因此匆笤，所有函數(shù)都可以調(diào)用apply()方法研侣。

很容易想到，如果原型鏈很長炮捧，那么訪問一個(gè)對象的屬性就會因?yàn)榛ǜ嗟臅r(shí)間查找而變得更慢庶诡，因此要注意不要把原型鏈搞得太長。

構(gòu)造函數(shù)

除了直接用{ ... }創(chuàng)建一個(gè)對象外咆课，JavaScript還可以用一種構(gòu)造函數(shù)的方法來創(chuàng)建對象末誓。它的用法是，先定義一個(gè)構(gòu)造函數(shù)：

functionStudent(name){

????????????this.name = name;

????????????this.hello =function(){alert('Hello, '+this.name +'!');

?????????}

}

你會問书蚪，咦喇澡，這不是一個(gè)普通函數(shù)嗎？

這確實(shí)是一個(gè)普通函數(shù)殊校，但是在JavaScript中晴玖，可以用關(guān)鍵字new來調(diào)用這個(gè)函數(shù)，并返回一個(gè)對象：

varxiaoming =newStudent('小明');

xiaoming.name;// '小明'

xiaoming.hello();// Hello, 小明!

注意箩艺，如果不寫new窜醉，這就是一個(gè)普通函數(shù)宪萄，它返回undefined艺谆。但是，如果寫了new拜英，它就變成了一個(gè)構(gòu)造函數(shù)静汤，它綁定的this指向新創(chuàng)建的對象，并默認(rèn)返回this居凶，也就是說虫给，不需要在最后寫return this;。

新創(chuàng)建的xiaoming的原型鏈?zhǔn)牵?/p>

xiaoming ----> Student.prototype ----> Object.prototype ---->null

也就是說侠碧，xiaoming的原型指向函數(shù)Student的原型抹估。如果你又創(chuàng)建了xiaohong、xiaojun弄兜，那么這些對象的原型與xiaoming是一樣的：

xiaoming ↘

xiaohong -→ Student.prototype ----> Object.prototype ----> null

nullxiaojun ↗

用new Student()創(chuàng)建的對象還從原型上獲得了一個(gè)constructor屬性药蜻，它指向函數(shù)Student本身：

xiaoming.constructor ===Student.prototype.constructor;//true

Student.prototype.constructor ===Student;//true

Object.getPrototypeOf(xiaoming) ===Student.prototype;//true

xiaoming instanceof Student;//true

instanceof運(yùn)算符用于檢測構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在某個(gè)實(shí)例對象的原型鏈上瓷式。

我們再來看幾個(gè)例子：

[]instanceofArray;//true

{}instanceofObject;//true

[] instanceof Object; //true

我們發(fā)現(xiàn)，雖然 instanceof 能夠判斷出 [ ] 是Array的實(shí)例语泽，但它認(rèn)為 [ ] 也是Object的實(shí)例,?從 instanceof 能夠判斷出 [ ].__proto__ 指向 Array.prototype贸典，而 Array.prototype.__proto__ 又指向了Object.prototype，最終 Object.prototype.proto 指向了null踱卵，標(biāo)志著原型鏈的結(jié)束廊驼。因此，[]惋砂、Array妒挎、Object 就在內(nèi)部形成了一條原型鏈.

看暈了吧？用一張圖來表示這些亂七八糟的關(guān)系就是：

紅色箭頭是原型鏈西饵。注意饥漫，Student.prototype指向的對象就是xiaoming、xiaohong的原型對象罗标，這個(gè)原型對象自己還有個(gè)屬性constructor庸队，指向Student函數(shù)本身。

另外闯割，函數(shù)Student恰好有個(gè)屬性prototype指向xiaoming彻消、xiaohong的原型對象，但是xiaoming宙拉、xiaohong這些對象可沒有prototype這個(gè)屬性宾尚，不過可以用__proto__這個(gè)非標(biāo)準(zhǔn)用法來查看。

現(xiàn)在我們就認(rèn)為xiaoming谢澈、xiaohong這些對象“繼承”自Student煌贴。

不過還有一個(gè)小問題，注意觀察：

xiaoming.name;//'小明'

xiaohong.name;//'小紅'

xiaoming.hello;//function:Student.hello()

xiaohong.hello;//function:Student.hello()

xiaoming.hello === xiaohong.hello;//false

xiaoming和xiaohong各自的name不同锥忿，這是對的牛郑，否則我們無法區(qū)分誰是誰了。

xiaoming和xiaohong各自的hello是一個(gè)函數(shù)敬鬓，但它們是兩個(gè)不同的函數(shù)淹朋，雖然函數(shù)名稱和代碼都是相同的！

如果我們通過new Student()創(chuàng)建了很多對象钉答，這些對象的hello函數(shù)實(shí)際上只需要共享同一個(gè)函數(shù)就可以了础芍，這樣可以節(jié)省很多內(nèi)存。

要讓創(chuàng)建的對象共享一個(gè)hello函數(shù)数尿，根據(jù)對象的屬性查找原則仑性，我們只要把hello函數(shù)移動到xiaoming、xiaohong這些對象共同的原型上就可以了右蹦，也就是Student.prototype：

用new創(chuàng)建基于原型的JavaScript的對象就是這么簡單诊杆！

忘記寫new怎么辦

如果一個(gè)函數(shù)被定義為用于創(chuàng)建對象的構(gòu)造函數(shù)鲫懒，但是調(diào)用時(shí)忘記了寫new怎么辦？

在strict(嚴(yán)格)模式下刽辙，this.name = name將報(bào)錯(cuò)窥岩，因?yàn)閠his綁定為undefined，在非strict模式下宰缤，this.name = name不報(bào)錯(cuò)颂翼，因?yàn)閠his綁定為window，于是無意間創(chuàng)建了全局變量name慨灭，并且返回undefined朦乏，這個(gè)結(jié)果更糟糕。

所以氧骤，調(diào)用構(gòu)造函數(shù)千萬不要忘記寫new呻疹。為了區(qū)分普通函數(shù)和構(gòu)造函數(shù)，按照約定筹陵，構(gòu)造函數(shù)首字母應(yīng)當(dāng)大寫刽锤，而普通函數(shù)首字母應(yīng)當(dāng)小寫，這樣朦佩，一些語法檢查工具如jslint將可以幫你檢測到漏寫的new并思。

最后，我們還可以編寫一個(gè)createStudent()函數(shù)语稠，在內(nèi)部封裝所有的new操作宋彼。一個(gè)常用的編程模式像這樣：

functionStudent(props){

????????????this.name = props.name ||'匿名';// 默認(rèn)值為'匿名'

????????????this.grade = props.grade ||1;// 默認(rèn)值為1

}

Student.prototype.hello =function(){

????????????alert('Hello, '+this.name +'!');

};

functioncreateStudent(props){

????????????returnnewStudent(props || {})

}

這個(gè)createStudent()函數(shù)有幾個(gè)巨大的優(yōu)點(diǎn)：一是不需要new來調(diào)用，二是參數(shù)非常靈活仙畦，可以不傳输涕，也可以這么傳：

varxiaoming = createStudent({ name:'小明'});

xiaoming.grade;// 1

如果創(chuàng)建的對象有很多屬性，我們只需要傳遞需要的某些屬性慨畸，剩下的屬性可以用默認(rèn)值莱坎。由于參數(shù)是一個(gè)Object，我們無需記憶參數(shù)的順序先口。如果恰好從JSON拿到了一個(gè)對象型奥，就可以直接創(chuàng)建出xiaoming瞳收。