學(xué)習(xí)使用過js的人一開始都會(huì)覺得js簡單坠狡，這是因?yàn)閖s語法簡單继找，學(xué)習(xí)過編程語言的人，很容易掌握js的基本語法并按要求寫出一些邏輯代碼實(shí)現(xiàn)頁面交互逃沿，另一方面是js有好多的庫函數(shù)及插件婴渡，比如jquery幻锁，極大方便了我們的使用，然而要想寫出高質(zhì)量的js顯得又那么力不從心缩搅，即便是看別人寫的一些插件或封裝的組件時(shí)越败，就有些摸不住頭腦，原因是硼瓣，js涉及到函數(shù)究飞，對(duì)象等的使用，在不了解或者了解不到位的情況下堂鲤，很難做好對(duì)對(duì)象的使用亿傅。
JavaScript 不包含傳統(tǒng)的類繼承模型，而是使用 prototypal 原型模型瘟栖。
雖然這經(jīng)常被當(dāng)作是 JavaScript 的缺點(diǎn)被提及葵擎，其實(shí)基于原型的繼承模型比傳統(tǒng)的類繼承還要強(qiáng)大。實(shí)現(xiàn)傳統(tǒng)的類繼承模型是很簡單半哟，但是實(shí)現(xiàn) JavaScript 中的原型繼承則要困難的多酬滤。
由于 JavaScript 是唯一一個(gè)被廣泛使用的基于原型繼承的語言，所以理解兩種繼承模式的差異是需要一定時(shí)間的寓涨，今天我們就來了解一下原型和原型鏈盯串。
了解一些概念
在解析之前，你應(yīng)該去在自己的腦海問幾個(gè)問題：
- 1戒良、什么是原型体捏？
- 2、什么是原型鏈糯崎？
- 3几缭、prototype與proto有什么不同，有什么聯(lián)系沃呢？
- 4年栓、constructor與上面兩個(gè)有什么聯(lián)系，怎么用樟插？
如果今天能把上面這四個(gè)問題都解決和理解了韵洋，那你就真正了解了JS的原型和原型鏈。接下來黄锤，咱們就一個(gè)一個(gè)問題去解決。
什么是原型食拜？
JavaScript 中鸵熟，萬物皆對(duì)象！但對(duì)象也是有區(qū)別的负甸。分為普通對(duì)象和函數(shù)對(duì)象流强，Object 痹届，F(xiàn)unction 是JS自帶的函數(shù)對(duì)象。每個(gè)對(duì)象都有原型（null和undefined除外）打月，你可以把它理解為對(duì)象的默認(rèn)屬性和方法队腐。
你可以把下面的代碼在瀏覽器打印出來看一下。
- Object：Object是一個(gè)函數(shù)對(duì)象奏篙，Object的原型就是一個(gè)Object對(duì)象柴淘，它里面存在著一些對(duì)象的方法和屬性，例如最常見的toString方法秘通。
- 新建對(duì)象：用new Object或者{}建的對(duì)象是普通對(duì)象为严，它沒有prototype屬性，只有proto屬性肺稀，它指向Object.prototype第股。
- Array： Array也是一個(gè)函數(shù)對(duì)象，它的原型就是Array.prototype话原，它里面存在著一些數(shù)組的方法和屬性夕吻，例如常見的push，pop等方法繁仁。
- Function：Function也是一個(gè)函數(shù)對(duì)象涉馅，但它有點(diǎn)特殊，它的原型就是一個(gè)function空函數(shù)改备。
- 自定義函數(shù)：它的原型就是你給它指定的那個(gè)東西控漠。如果你不指定，那它的原型就是一個(gè)Object.prototype悬钳。
什么是原型鏈盐捷？
在JavaScript 中，每個(gè)對(duì)象都有一個(gè)指向它的原型（prototype）對(duì)象的內(nèi)部鏈接默勾。這個(gè)原型對(duì)象又有自己的原型碉渡，直到某個(gè)對(duì)象的原型為 null 為止（也就是不再有原型指向），組成這條鏈的最后一環(huán)母剥。這種一級(jí)一級(jí)的鏈結(jié)構(gòu)就稱為原型鏈（prototype chain）儡遮。
JavaScript 對(duì)象是動(dòng)態(tài)的屬性“包”（指其自己的屬性）黔帕。JavaScript 對(duì)象有一個(gè)指向一個(gè)原型對(duì)象的鏈。當(dāng)試圖訪問一個(gè)對(duì)象的屬性時(shí)，它不僅僅在該對(duì)象上搜尋蹦魔，還會(huì)搜尋該對(duì)象的原型，以及該對(duì)象的原型的原型洞辣，依此層層向上搜索仑荐，直到找到一個(gè)名字匹配的屬性或到達(dá)原型鏈的末尾。
當(dāng)你用new Object或者直接定義一個(gè)對(duì)象時(shí)伪阶，它的原型鏈就是：
o ==》 Object.prototype ==》 null
但你訪問o上沒有的屬性或方法時(shí)煞檩，JS會(huì)往Object.prototype上尋找該屬性和方法处嫌。如果有則直接返回，如果沒有斟湃，方法則報(bào)錯(cuò)熏迹，這個(gè)方法未定義，屬性則返回undefined凝赛。
當(dāng)你用構(gòu)造函數(shù)（構(gòu)造函數(shù)我們一般首字母大寫）建立一個(gè)對(duì)象時(shí)注暗，它的原型鏈就是：
tsrot ==》 Person.prototype ==》 Object.prototype ==》 null
如果沒有定義Person.prototype這一環(huán)，則直接跳到下一環(huán)哄酝。
來點(diǎn)更復(fù)雜的友存。
當(dāng)你需要父類的屬性和方法時(shí)，你可以把它的原型指向父類的原型陶衅。此時(shí)的原型鏈就是：
child ==》 Parent.prototype ==》 Object.prototype ==》 null
數(shù)組也是一個(gè)對(duì)象屡立，不過它是由Array構(gòu)造函數(shù)new而來的，所以它的原型鏈就是：
arr ==》 Array.prototype ==》 Object.prototype ==》 null
fun是一個(gè)函數(shù)對(duì)象搀军，它是由Function構(gòu)造函數(shù)new而來的膨俐，所以它的原型鏈就是：
fun ==》 Function.prototype ==》 Object.prototype ==》 null
fun它沒有name屬性，但是Function它有罩句，所以這個(gè)name就是Function原型上的焚刺。
prototype與proto
在Javascript中，每個(gè)函數(shù)都有一個(gè)原型屬性prototype指向自身的原型门烂，而由這個(gè)函數(shù)創(chuàng)建的對(duì)象也有一個(gè)proto屬性指向這個(gè)原型乳愉，而函數(shù)的原型是一個(gè)對(duì)象（函數(shù)點(diǎn)prototype也是一個(gè)普通對(duì)象，F(xiàn)unction.prototype除外,它是函數(shù)對(duì)象屯远，但它很特殊蔓姚，他沒有prototype屬性），所以這個(gè)對(duì)象也會(huì)有一個(gè)proto指向自己的原型慨丐，這樣逐層深入直到Object對(duì)象的原型坡脐，這樣就形成了原型鏈。普通對(duì)象沒有prototype房揭，但有proto屬性备闲。
JS在創(chuàng)建對(duì)象（不論是普通對(duì)象還是函數(shù)對(duì)象）的時(shí)候，都有一個(gè)叫做proto的內(nèi)置屬性捅暴，用于指向創(chuàng)建它的函數(shù)對(duì)象的原型對(duì)象prototype恬砂。
普通對(duì)象的proto
var o = {name:"tsrot"};
console.log(o.proto);
//Object{}
console.log(o.prototype);
//undefined
console.log(o.proto === Object.prototype);
//true
構(gòu)造對(duì)象的proto
function Parent{
this.name = "i am parent";
}
Parent.prototype = {age:24};
function Child{
this.name = "i am child";
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
var child = new Child;
console.log(child.proto); //Object{}
console.log(Child.prototype); //Object{}
console.log(child.proto === Child.prototype);
//true
console.log(Parent.prototype.proto ===
Object.prototype); //true
數(shù)組的proto
var arr = [1,2,3];
console.log(arr.proto);
//[Symbol(Symbol.unscopables): Object]
console.log(Array.prototype);
//[Symbol(Symbol.unscopables): Object]
console.log(arr.proto === Array.prototype); //true
函數(shù)的proto
var fun = function{
var hello = "i am function"
}
fun.prototype = {name:"tsrot"};
console.log(fun.prototype);
//Object {name: "tsrot"}
console.log(fun.proto);
//function{}
console.log(fun.prototype === fun.proto);
//false
console.log(fun.proto === Function.prototype);
//true
