原型的出現(xiàn)，就是為了解決 構(gòu)造函數(shù)的缺點也就是給我們提供了一個給對象添加函數(shù)的方法不然構(gòu)造函數(shù)只能給對象添加屬性，不能合理的添加函數(shù)就太LOW了。

prototype
每一個函數(shù)天生自帶一個成員，叫做 prototype，是一個對象空間即然每一個函數(shù)都有，構(gòu)造函數(shù)也是函數(shù)，構(gòu)造函數(shù)也有這個對象空間這個 prototype 對象空間可以由函數(shù)名來訪問
function Person() {}
console.log(Person.prototype) // 是一個對象
即然是個對象，那么我們就可以向里面放入一些東西
function Person() {}
Person.prototype.name = 'prototype'
Person.prototype.sayHi = function () {}
我們發(fā)現(xiàn)了一個叫做 prototype 的空間是和函數(shù)有關(guān)聯(lián)的并且可以向里面存儲一些東西重點： 在函數(shù)的 prototype 里面存儲的內(nèi)容，不是給函數(shù)使用的，是給函數(shù)的每一個實例化對象使用的那實例化對象怎么使用能？
proto
每一個對象都天生自帶一個成員，叫做 proto，是一個對象空間即然每一個對象都有，實例化對象也是對象，那么每一個實例化對象也有這個成員這個 proto 對象空間是給每一個對象使用的當(dāng)你訪問一個對象中的成員的時候
如果這個對象自己本身有這個成員，那么就會直接給你結(jié)果如果沒有，就會去 proto 這個對象空間里面找，里面有的話就給你結(jié)果未完待續(xù)。。。
那么這個 proto 又指向哪里呢？
這個對象是由哪個構(gòu)造函數(shù) new 出來的那么這個對象的 proto 就指向這個構(gòu)造函數(shù)的 prototype
function Person() {}
var p1 = new Person()
console.log(p1.proto === Person.prototype) // true
我們發(fā)現(xiàn)實例化對象的 proto 和所屬的構(gòu)造函數(shù)的 prototype 是一個對象空間我們可以通過構(gòu)造函數(shù)名稱來向 prototype 中添加成員對象在訪問的時候自己沒有，可以自動去自己的 proto 中查找那么，我們之前構(gòu)造函數(shù)的缺點就可以解決了
我們可以把函數(shù)放在構(gòu)造函數(shù)的 prototype 中實例化對象訪問的時候，自己沒有，就會自動去 proto 中找那么也可以使用了
function Person() {}
Person.prototype.sayHi = function () {
console.log('hello Person')
}
var p1 = new Person()
p1.sayHi()
p1 自己沒有 sayHi 方法，就會去自己的 proto 中查找p1.proto 就是 Person.prototype我們又向 Person.prototype 中添加了 sayHi 方法所以 p1.sayHi 就可以執(zhí)行了
到這里，當(dāng)我們實例化多個對象的時候，每個對象里面都沒有方法
都是去所屬的構(gòu)造函數(shù)的 protottype 中查找那么每一個對象使用的函數(shù)，其實都是同一個函數(shù)那么就解決了我們構(gòu)造函數(shù)的缺點
function Person() {}
Person.prototype.sayHi = function () {
console.log('hello')
}
var p1 = new Person()
var p2 = new Person()
console.log(p1.sayHi === p2.sayHi)
p1 是 Person 的一個實例p2 是 Person 的一個實例也就是說 p1.proto 和 p2.proto 指向的都是 Person.prototype當(dāng) p1 去調(diào)用 sayHi 方法的時候是去 Person.prototype 中找當(dāng) p2 去調(diào)用 sayHi 方法的時候是去 Person.prototype 中找那么兩個實例化對象就是找到的一個方法，也是執(zhí)行的一個方法
結(jié)論
當(dāng)我們寫構(gòu)造函數(shù)的時候?qū)傩晕覀冎苯訉懺跇?gòu)造函數(shù)體內(nèi)方法我們寫在原型上
插個小消息，也方便想學(xué)習(xí)入行成為程序員的同學(xué)，在文章下方留言即可試聽課程外加領(lǐng)取千鋒HTML5、UI交互設(shè)計、PHP、Java+云數(shù)據(jù)、大數(shù)據(jù)開發(fā)、VR/AR/Unity游戲開發(fā)、Python人工智能、Linux云計算、全棧軟件測試、網(wǎng)絡(luò)安全等全部的視頻學(xué)習(xí)教程。
原型鏈
我們剛才聊過構(gòu)造函數(shù)了，也聊了原型那么問題出現(xiàn)了，我們說構(gòu)造函數(shù)的 prototype 是一個對象又說了每一個對象都天生自帶一個 proto 屬性那么 構(gòu)造函數(shù)的 prototype 里面的 proto 屬性又指向哪里呢？
一個對象所屬的構(gòu)造函數(shù)
每一個對象都有一個自己所屬的構(gòu)造函數(shù)比如： 數(shù)組
// 數(shù)組本身也是一個對象
var arr = []
var arr2 = new Array()
以上兩種方式都是創(chuàng)造一個數(shù)組我們就說數(shù)組所屬的構(gòu)造函數(shù)就是 Array
比如： 函數(shù)
// 函數(shù)本身也是一個對象
var fn = function () {}
var fun = new Function()
以上兩種方式都是創(chuàng)造一個函數(shù)我們就說函數(shù)所屬的構(gòu)造函數(shù)就是 Function
constructor
對象的 proto 里面也有一個成員叫做 constructor這個屬性就是指向當(dāng)前這個對象所屬的構(gòu)造函數(shù)
鏈狀結(jié)構(gòu)
當(dāng)一個對象我們不知道準(zhǔn)確的是誰構(gòu)造的時候，我們呢就把它看成 Object 的實例化對象也就是說，我們的 構(gòu)造函數(shù) 的 prototype 的 proto 指向的是 Object.prototype那么 Object.prototype 也是個對象，那么它的 proto 又指向誰呢？因為 Object 的 js 中的頂級構(gòu)造函數(shù)，我們有一句話叫 萬物皆對象所以 Object.prototype 就到頂了，Object.prototype 的 proto 就是 null
原型鏈的訪問原則
我們之前說過，訪問一個對象的成員的時候，自己沒有就會去 proto 中找接下來就是，如果 proto 里面沒有就再去 proto 里面找一直找到 Object.prototype 里面都沒有，那么就會返回 undefiend
對象的賦值

       到這里，我們就會覺得，如果是賦值的話，那么也會按照原型鏈的規(guī)則來但是： 并不是！并不是！并不是！ 重要的事情說三遍賦值的時候，就是直接給對象自己本身賦值如果原先有就是修改原先沒有就是添加不會和 proto 有關(guān)系。

       到了這里，我們就發(fā)現(xiàn)了面向?qū)ο蟮乃枷肽Ｊ搅水?dāng)我想完成一個功能的時候先看看內(nèi)置構(gòu)造函數(shù)有沒有能給我提供一個完成功能對象的能力如果沒有，我們就自己寫一個構(gòu)造函數(shù)，能創(chuàng)造出一個完成功能的對象然后在用我們寫的構(gòu)造函數(shù) new 一個對象出來，幫助我們完成功能就行了比如： tab選項卡。

       我們要一個對象對象包含一個屬性：是每一個點擊的按鈕對象包含一個屬性：是每一個切換的盒子對象包含一個方法：是點擊按鈕能切換盒子的能力那么我們就需要自己寫一個構(gòu)造函數(shù)，要求 new 出來的對象有這些內(nèi)容就好了然后在用構(gòu)造函數(shù) new 一個對象就行了。

上一篇

長沙Web前端培訓(xùn)JavaScript教程：構(gòu)造函數(shù)內(nèi)容講解

下一篇

千鋒出品：大廠都在用的TypeScrip套精品教程