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

2，考你一下

前面提到的幾個概念理解清楚，再來看看下面的列子是否清楚

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

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


1, 構(gòu)造函數(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

在上面第二點中，每個js對象都有一個隱藏的原型對象屬性__proto__

那Test的原型對象Test.prototype會不會也有一個隱式原型__proto__呢？ 控制臺輸出如下：

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

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

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

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

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

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

2，鏈

在控制臺打印Object.prototype，會發(fā)現(xiàn) Object.prototype也是一個對象

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

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

原型鏈的終點是null

Object.prototype.__proto__ === null

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

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

如果在原型鏈中找到了這個屬性，就返回找到的屬性值；如果整個原型鏈都沒找到這個屬性值，則返回 undefined，沒找到方法直接報錯(not a function)

四，練習(xí)一下

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

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

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

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

4，原型鏈的終點是null

看看下面的題是否清楚：

function Test(name, age){
    this.name = name
    this.age = age
}
Test.prototype.say = function(){
    console.log('我能說話')
}
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出來，在原型鏈上都指向 Test.prototype)
// 4， Object.prototype    5, Test    6, null (終點)    7,true （同問題3）

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

五，進(jìn)階

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

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

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

簡單理解，普通對象就是我們最長見的 { } 鍵值對； 函數(shù)對象通常包含了一個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'

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

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

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

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

2，原型鏈機制

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

為什么會說提供查找方向呢，看看下面兩個例子：

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

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

why ? 

來看看ai對此的回答

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

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

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

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

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

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

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ù)對象的__proto__指向Function.prototype

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

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

針對 Function.prototype === Function.__proto__， 諸多大佬對此有各種不同的解釋，以下拋出兩個觀點僅供參考：

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

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

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

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

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

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

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

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

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

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在自身沒有找到price，順著Test的__proto__到Function.prototype上找到了price = 300，所以直接返回 300；若Function.prototype上沒有price，才會進(jìn)一步順著__proto__找到Object.prototype

在實際使用中，要獲取定義到Test.prototype上的屬性，還可以用原型對象Test.prototype.price訪問；不過建議還是通過實例（obj）來訪問具體的屬性(obj.name)，而不是構(gòu)造函數(shù)Test.name訪問，畢竟實例new出來的目的就是為了調(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，每個對象均存在隱式原型(__proto__)，函數(shù)對象才有prototype屬性

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

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

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

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