實(shí)例對(duì)象obj3通過(guò)__proto__指向了Test的原型對(duì)象（Test.prototype）,如圖：（Test.prototype.constructor ：從Test先指向原型對(duì)象Test.prototype在.constructor指回Test，繞了一圈，圖中就不列舉）  

2，考你一下

前面提到的幾個(gè)概念理解清楚，再來(lái)看看下面的列子是否清楚

function Test(name, age){
    this.name = name
    this.age = age
}

Test.prototype.say = function(){
    console.log('我能說(shuō)話')
}
var obj3 = new Test('Jack', 26)


1, 構(gòu)造函數(shù)是? 實(shí)例是?
2, obj3.constructor === Test   true or false?
3, obj3.__proto__ === Test ?
4, Test.prototype === obj3.__proto__ ?
5, obj3.__proto__.constructor === Test ?

// 1, Test  obj3  2,true  3,false  4,true  5,true

三，原型鏈

1，Object.prototype

在上面第二點(diǎn)中，每個(gè)js對(duì)象都有一個(gè)隱藏的原型對(duì)象屬性__proto__

那Test的原型對(duì)象Test.prototype會(huì)不會(huì)也有一個(gè)隱式原型__proto__呢？ 控制臺(tái)輸出如下：

Test.prototype當(dāng)然也存在一個(gè)屬性__proto__，而這個(gè)Test.prototype.__proto__到底是誰(shuí)呢？

Test.prototype.__proto__ === Object.prototype
// true

(1) Test.prototype的隱式原型(__proto__)就是Object.prototype

(2) 所有的對(duì)象，包括構(gòu)造函數(shù)的原型對(duì)象，最終都繼承自 Object.prototype，這是js原型鏈的頂點(diǎn)

Object.prototype是從哪里來(lái)的呢？ 當(dāng)然是由Object的屬性prototype指向來(lái)的。Object.prototype同樣也會(huì)存在屬性 constructor指回Object（【目錄 2,原型 原型對(duì)象】中提到）

此時(shí)的關(guān)系圖：

2，鏈

在控制臺(tái)打印Object.prototype，會(huì)發(fā)現(xiàn) Object.prototype也是一個(gè)對(duì)象

既然它也是對(duì)象，它也存在隱式屬性__proto__。想想看，如果Object.prototype.__proto__再去指向某個(gè)對(duì)象的原型(prototype)，那整條線就顯得無(wú)窮無(wú)盡，一直找下去

js代碼在創(chuàng)建時(shí)我們的開(kāi)發(fā)者當(dāng)然考慮到了，Object.prototype作為原型鏈的頂端，位于原型鏈的最末端。因此，它不再有自己的原型，所以O(shè)bject.prototype.__proto__ 指向null，表示原型鏈的終點(diǎn)

原型鏈的終點(diǎn)是null

Object.prototype.__proto__ === null

這個(gè)時(shí)候終于到達(dá)了終點(diǎn)，形成了這樣一個(gè)關(guān)系圖（一整個(gè)鏈接在一起）：

每個(gè)對(duì)象都有一個(gè)原型(prototype),它指向另外一個(gè)對(duì)象，而指向的對(duì)象又存在屬性(_proto_)指向另外一個(gè)對(duì)象。當(dāng)我們?cè)L問(wèn)對(duì)象(obj3)的屬性時(shí)，會(huì)先在對(duì)象定義的屬性中進(jìn)行查找，沒(méi)找到就會(huì)沿著__proto__一路向上查找，最終形成一個(gè)鏈?zhǔn)浇Y(jié)構(gòu)，這整個(gè)鏈?zhǔn)浇Y(jié)構(gòu)就叫做原型鏈

如果在原型鏈中找到了這個(gè)屬性，就返回找到的屬性值；如果整個(gè)原型鏈都沒(méi)找到這個(gè)屬性值，則返回 undefined，沒(méi)找到方法直接報(bào)錯(cuò)(not a function)

四，練習(xí)一下

到了這里應(yīng)該對(duì)整個(gè)原型鏈有了自己的認(rèn)知，其實(shí)只要記住以下幾個(gè)概念，就可以試著自己畫(huà)出整個(gè)關(guān)系圖

1，在js中，每一個(gè)對(duì)象（函數(shù)也是對(duì)象）都有一個(gè)特殊的屬性叫做原型（prototype），它指向另一個(gè)對(duì)象，這個(gè)對(duì)象被稱為原型對(duì)象， 原型對(duì)象是用來(lái)共享屬性和方法的

2，對(duì)象有一個(gè)屬性(__proto__)指向構(gòu)造函數(shù)的原型對(duì)象，構(gòu)造函數(shù)的原型對(duì)象也存在__proto__

3，原型鏈的頂端是Object.prototype

4，原型鏈的終點(diǎn)是null

看看下面的題是否清楚：

function Test(name, age){
    this.name = name
    this.age = age
}
Test.prototype.say = function(){
    console.log('我能說(shuō)話')
}
var obj3 = new Test('Jack', 26)
var obj4 = new Test('Rose', 24)

1, Test.prototype === ( ) ?
2, obj3.__proto__.__proto__ === ( ) ?
3, obj3.__proto__ === obj4.__proto__ ?
4, Test.prototype.__proto__ === ( ) ?
5, obj4.__proto__.constructor === ( ) ?
6, Object.prototype.__proto__ === ( ) ?
7, obj3.say === obj4.say ?


// 1, obj3.__proto__ 或 obj4.__proto    2,Object.prototype    3, true (二者都由Test new出來(lái)，在原型鏈上都指向 Test.prototype)
// 4， Object.prototype    5, Test    6, null (終點(diǎn))    7,true （同問(wèn)題3）

要是不清楚可以在結(jié)合關(guān)系圖捋一捋

五，進(jìn)階

1，普通對(duì)象與函數(shù)對(duì)象

在 js 中，有兩種主要類型的對(duì)象：普通對(duì)象和函數(shù)對(duì)象。普通對(duì)象最常見(jiàn)，通過(guò)"{ }"創(chuàng)建的就是普通對(duì)象；通過(guò)new Function出來(lái)的就是函數(shù)對(duì)象（函數(shù)聲明、函數(shù)表達(dá)式創(chuàng)建的為函數(shù)對(duì)象），我們可以用typeof來(lái)區(qū)分  （注意：這里函數(shù)聲明式和表達(dá)式不要和對(duì)象字面量方式混淆）

f1,f2,f3都是函數(shù)對(duì)象， Object 也是函數(shù)對(duì)象， b1,2,3為普通對(duì)象; 

簡(jiǎn)單理解，普通對(duì)象就是我們最長(zhǎng)見(jiàn)的 { } 鍵值對(duì)； 函數(shù)對(duì)象通常包含了一個(gè)function

function f1(){}

var f2 = function(){}

var f3 = new Function('name')

var b1 = new f1()

var b2 = {name: 'Rose'}

var b3 = new Object()


typeof f1    // 'function'
typeof f2    //'function'
typeof f3    //'function'
typeof b1    //'object'
typeof b2    //'object'
typeof b3    //'object'
typeof Object // 'Function'

這是再來(lái)看我們上面的例子就很清晰了， obj3 為普通對(duì)象， Test為函數(shù)對(duì)象 (不信F12控制臺(tái)打開(kāi) typeof試試)

function Test(name, age){
    this.name = name
    this.age = age
}
var obj3 = new Test('Jack', 26)

在上面【2 原型對(duì)象】我們提到過(guò)每一個(gè)對(duì)象（函數(shù)也是對(duì)象）都有一個(gè)特殊的屬性叫做原型（prototype）   obj3是對(duì)象，但是它沒(méi)有prototype的這個(gè)原型屬性（不信控制臺(tái)試試）

所以這話不夠完整，只有 函數(shù)對(duì)象才具有 prototype 這個(gè)原型屬性

2，原型鏈機(jī)制

在【二，隱式原型】中，提到過(guò): __proto__存在的意義在于為原型鏈查找提供方向。 看你是不是忘記了吧

為什么會(huì)說(shuō)提供查找方向呢，看看下面兩個(gè)例子：

左邊在構(gòu)造函數(shù)Test的原型對(duì)象（Test.prototype）上定義了sex， Test.sex為undefined （ 注意是Test.sex 不是 obj.sex）； 右邊在Object.prototype上定義sex ，Test.sex 能獲取到值；  為什么在Test.prototype上定義，Tset.sex不能通過(guò)原型鏈到Test.prototype上去找到sex屬性；而定義到頂點(diǎn)Object.prototype上，又能通過(guò)原型鏈找到了

看了大佬的一些解答分析，定義到Test.prototype上的時(shí)候，Test.sex并沒(méi)有通過(guò)原型鏈查找，而是檢查Test自身是否定義該屬性，沒(méi)有所以是undefined。感覺(jué)解釋會(huì)有點(diǎn)說(shuō)不通，定義到Object.prototype，不也應(yīng)該是Test自身檢查，也會(huì)檢查不到，但我們能輸出值，證明的確是順著原型鏈去查找到了Object.prototype上

why ? 

來(lái)看看ai對(duì)此的回答

我們?cè)谧筮吚又?，Test本身并沒(méi)有直接定義'sex'屬性，所以查找失敗返回undefined， 如果要到原型對(duì)象上查找 正確的方式應(yīng)該是 Test.prototype.sex   這結(jié)論很好沒(méi)任何問(wèn)題，但是為毛右邊的例子能獲取到呢 ？不要給我岔開(kāi)話題啊喂....

為了找到答案，我一度去翻遍全網(wǎng)，問(wèn)遍ai，得到結(jié)論大概都是:" 原型鏈從實(shí)例對(duì)象開(kāi)始查找，不是從構(gòu)造函數(shù)開(kāi)始查找，構(gòu)造函數(shù)不具備相同的原型鏈機(jī)制"   這回答非常好，可是還是沒(méi)解決我的問(wèn)題?。。?！  不具備相同的原型鏈機(jī)制，為什么定義到Object.prototype上就能獲取到了呢？  反復(fù)詢問(wèn)ai，就開(kāi)始給我繞圈子了.......  費(fèi)解

終究還是得靠自己  先捋一下

既然__proto__才是原型鏈查找的方向，同時(shí)對(duì)象都有__proto__這個(gè)屬性，那構(gòu)造函數(shù)Test是屬于函數(shù)對(duì)象，函數(shù)對(duì)象也是對(duì)象 那是否Test也會(huì)存在__proto__這個(gè)屬性呢？ 在上面的原型鏈圖中并沒(méi)有指出這個(gè)屬性  請(qǐng)往下看

3，F(xiàn)unction的原型

在第二點(diǎn)【隱式原型__proto__】中，我們提到__proto__指向創(chuàng)建它的構(gòu)造函數(shù)的原型對(duì)象。

function Test(name, age){
    this.name = name
    this.age = age
}
var obj = new Test('Jack', 26)

Test.__proto__ === Function.prototype  // true

（1）構(gòu)造函數(shù)Test的隱式原型（ __proto__）指向 Function.prototype, 函數(shù)對(duì)象的__proto__指向Function.prototype

至于為什么，js在設(shè)計(jì)時(shí)決定了構(gòu)造函數(shù)本身是函數(shù)，當(dāng)然也可以通過(guò)指向 Function.prototype來(lái)訪問(wèn)原型鏈上的屬性和方法，讓構(gòu)造函數(shù)也能參與到原型鏈中來(lái)（雖然不建議通過(guò)構(gòu)造函數(shù)訪問(wèn)）

Function會(huì)有原型(prototype)，當(dāng)然也有隱式原型(__proto__)，打印這兩個(gè)原型，會(huì)發(fā)現(xiàn)二者互相相等  Function.prototype === Function.__proto__  是不是很神奇？ 看起來(lái)像是自己創(chuàng)造了自己

針對(duì) Function.prototype === Function.__proto__， 諸多大佬對(duì)此有各種不同的解釋，以下拋出兩個(gè)觀點(diǎn)僅供參考：

1，F(xiàn)unction 也是對(duì)象， 由new Function創(chuàng)建，所以自己創(chuàng)造自己       

2，F(xiàn)unction作為一個(gè)內(nèi)置對(duì)象，代碼運(yùn)行前就存在，并非自己創(chuàng)造自己，先有的Function，然后實(shí)現(xiàn)上把原型指向了Function.prototype  以此來(lái)保持和其他函數(shù)一致，表明一種關(guān)系 

對(duì)象都擁有隱式原型(__proto__)，F(xiàn)unction.prototype當(dāng)然也存在__proto__,打印出來(lái)看看

好像有點(diǎn)眼熟? 是不是和Object.prototype打印的有點(diǎn)像  Function.prototype是函數(shù)對(duì)象，按照剛得出的結(jié)論，函數(shù)對(duì)象的__proto__應(yīng)該指向Function.prototype(即Function.prototype.__proto === Function.prototype)，但是自己指向自己并沒(méi)有意義。 別忘記Object.prototype才是原型鏈的頂點(diǎn)，F(xiàn)unction.prototype存在于原型鏈中必然會(huì)與Object.prototype存在關(guān)聯(lián)，指向Object.prototype能保證原型鏈存在終點(diǎn)，所以Function.prototype.__proto__ === Object.prototype

再來(lái)看原型鏈關(guān)系，這時(shí)候就成了這樣:

（2）如果在深究一點(diǎn)，Object也是函數(shù)對(duì)象，Object.__proto__ 也會(huì)指向Function.prototype

（3）構(gòu)造函數(shù)Test也有constructor屬性，這個(gè)屬性指向創(chuàng)建該函數(shù)的構(gòu)造函數(shù)；如果自己沒(méi)有定義構(gòu)造函數(shù)，會(huì)指向到 Function （Test.constructor === Function）

原型鏈關(guān)系就成了這樣：

 針對(duì)上面 【2，原型鏈機(jī)制】 中的問(wèn)題也有了答案，在構(gòu)造函數(shù)Test上訪問(wèn)Object.prototype中的屬性時(shí)，其實(shí)是順著Test.__proto__這條路徑從Function去訪問(wèn)    空口無(wú)憑，證據(jù)如下,看看會(huì)輸出什么

function Test(name, age){
    this.name = name
    this.age = age
}
var obj = new Test('Jack', 26)

Object.prototype.price = 2000

Function.prototype.price = 300

Test.price

Test在自身沒(méi)有找到price，順著Test的__proto__到Function.prototype上找到了price = 300，所以直接返回 300；若Function.prototype上沒(méi)有price，才會(huì)進(jìn)一步順著__proto__找到Object.prototype

在實(shí)際使用中，要獲取定義到Test.prototype上的屬性，還可以用原型對(duì)象Test.prototype.price訪問(wèn)；不過(guò)建議還是通過(guò)實(shí)例（obj）來(lái)訪問(wèn)具體的屬性(obj.name)，而不是構(gòu)造函數(shù)Test.name訪問(wèn)，畢竟實(shí)例new出來(lái)的目的就是為了調(diào)用構(gòu)造函數(shù)上的方法屬性

真相大白，再一次證明__proto__存在的意義在于為原型鏈查找提供方向，原型鏈查找靠的是__proto__，而不是prototype

六，練習(xí)一下

1,

function Test(){}
var obj1 = new Test()

1, console.log( obj1.__proto__ === Test.prototype )
2, obj1.__proto__.__proto__ === （）？
3, Object.prototype.__proto__ === ()？
4, console.log( Test.prototype === obj1.__proto__ )
5, Test.__proto__ === Function.prototype ?
6, Function.prototype.__proto__ === () ?
7, Funcion.prototype === Function.__proto__ ?

// 1,true 2,Object.prototype 3,null 4,true 5,true 6,Object.prototype 7,true

2,

var Test = function(){}
Test.prototype.name = 'Rose'
var obj1 = new Test()
Test.prototype = {name: 'Rose', age: 26}
var obj2 = new Test()

obj1.name
obj1.age
obj2.name
obj2.age

// 'Rose'  undefined  'Rose'  26
// Test.prototype =  {} 將Test.prototype.name 覆蓋

3，

function Test(){}

Object.prototype.a = function(){
    console.log(1)
}

Function.prototype.b = function(){
    console.log(2)
}

var obj = new Test()

obj.a()
obj.b()
Test.a()
Test.b()

//  1  (not a function)  1  2
// 不太清楚再去看看Function的原型

七，總結(jié)

1，每個(gè)對(duì)象均存在隱式原型(__proto__)，函數(shù)對(duì)象才有prototype屬性

2，__proto__存在的意義在于為原型鏈查找提供方向，原型鏈查找靠的是__proto__，而不是prototype

3，函數(shù)對(duì)象的__proto__都指向Function.prototype

4，每個(gè)對(duì)象都有一個(gè)隱式原型屬性(__proto__)，多個(gè)原型通過(guò)__proto__鏈接在一起形成的鏈?zhǔn)浇Y(jié)構(gòu)就是原型鏈

到此這篇關(guān)于js原型與原型鏈的文章就介紹到這了,更多相關(guān)js原型與原型鏈詳解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！