摘要：寫(xiě)在前面如果說(shuō)是一本武學(xué)典籍，那么原型鏈就是九陽(yáng)神功。那么，如何修煉好中的九陽(yáng)神功呢真正的功法大成的技術(shù)是從底層上去理解，那種工程師和碼農(nóng)的區(qū)別就在于對(duì)底層的理解，當(dāng)你寫(xiě)完一行代碼，或者你遇見(jiàn)一個(gè)解決的速度取決于你對(duì)底層的理解。

如果說(shuō)JavaScript是一本武學(xué)典籍，那么原型鏈就是九陽(yáng)神功。在金庸的武俠小說(shuō)里面，對(duì)九陽(yáng)神功是這樣描述的：
"練成「九陽(yáng)神功」后，會(huì)易筋洗髓；生出氤氳紫氣；內(nèi)力自生速度奇快，無(wú)窮無(wú)盡，普通拳腳也能使出絕大攻擊力；防御力無(wú)可匹敵，自動(dòng)護(hù)體，反彈外力攻擊，成就金剛不壞之軀；習(xí)者速度將受到極大加成；更是療傷圣典，百病不生，諸毒不侵。至陽(yáng)熱氣全力施展可將人焚為焦炭，專(zhuān)門(mén)克破所有寒性和陰毒內(nèi)力。"可見(jiàn)其功法強(qiáng)大。
那么，如何修煉好js中的九陽(yáng)神功呢？真正的功法大成的技術(shù)是從底層上去理解，那種工程師和碼農(nóng)的區(qū)別就在于對(duì)底層的理解，當(dāng)你寫(xiě)完一行代碼，或者你遇見(jiàn)一個(gè)bug,解決的速度取決于你對(duì)底層的理解。什么是底層？我目前個(gè)人的理解是“在你寫(xiě)每一行代碼的時(shí)候，它將如何在相應(yīng)的虛擬機(jī)或者V8引擎中是如何運(yùn)行的，更厲害的程序員甚至知道每條數(shù)據(jù)的操作是在堆里面還是在棧里面，都做到了然于胸，這是JavaScript的內(nèi)功最高境界（反正我現(xiàn)在是做不到，我不知道你們能不能，哈哈哈）”。

**理解原型鏈之前首先要了解js的基本類(lèi)型和引用類(lèi)型：
1、基本類(lèi)型
基本類(lèi)型有Undefined、Null、Boolean、Number 和String。這些類(lèi)型在內(nèi)存中分別占有固定大小的空間，他們的值保存在棧空間，
我們通過(guò)按值來(lái)訪問(wèn)的。
基本類(lèi)型：簡(jiǎn)單的數(shù)據(jù)段，存放在棧內(nèi)存中，占據(jù)固定大小的空間。
2、引用類(lèi)型
引用類(lèi)型，值大小不固定，棧內(nèi)存中存放地址指向堆內(nèi)存中的對(duì)象。是按引用訪問(wèn)的。
存放在堆內(nèi)存中的對(duì)象，變量實(shí)際保存的是一個(gè)指針，這個(gè)指針指向另一個(gè)位置。每個(gè)空間大小不一樣，要根據(jù)情況開(kāi)進(jìn)行特定的分配。
當(dāng)我們需要訪問(wèn)引用類(lèi)型（如對(duì)象，數(shù)組，函數(shù)等）的值時(shí)，首先從棧中獲得該對(duì)象的地址指針，然后再?gòu)亩褍?nèi)存中取得所需的數(shù)據(jù)。**

js的原型鏈說(shuō)簡(jiǎn)單也簡(jiǎn)單，說(shuō)難也難。

首先說(shuō)明：函數(shù)（Function）才有prototype屬性，對(duì)象（除了Object）擁有_proto_.
原型鏈的頂層就是Object.prototype,而這個(gè)對(duì)象的是沒(méi)有原型對(duì)象的。
可以在Chrome輸入：

Object.__proto__

輸出的是：

? () { [native code] }

可以看到這個(gè)沒(méi)有.prototype屬性。

我們知道原型是一個(gè)對(duì)象，其他對(duì)象可以通過(guò)它實(shí)現(xiàn)屬性繼承。

var a = {};
console.log(a.prototype);  //undefined
console.log(a.__proto__);  //Object {}

var b = function(){}
console.log(b.prototype);  //b {}
console.log(b.__proto__);  //function() {}

/*1、字面量方式*/
var a = {};
console.log(a.__proto__);  //Object {}

console.log(a.__proto__ === a.constructor.prototype); //true

/*2、構(gòu)造器方式*/
var A = function(){};
var a = new A();
console.log(a.__proto__); //A {}

console.log(a.__proto__ === a.constructor.prototype); //true

/*3、Object.create()方式*/
var a1 = {a:1}
var a2 = Object.create(a1);
console.log(a2.__proto__); //Object {a: 1}

console.log(a.__proto__ === a.constructor.prototype); //false（此處即為圖1中的例外情況）

var A = function(){};
var a = new A();
console.log(a.__proto__); //A {}（即構(gòu)造器function A 的原型對(duì)象）
console.log(a.__proto__.__proto__); //Object {}（即構(gòu)造器function Object 的原型對(duì)象）
console.log(a.__proto__.__proto__.__proto__); //null

我曾經(jīng)簡(jiǎn)單理解instanceof只是檢測(cè)一個(gè)對(duì)象是否是另個(gè)對(duì)象new出來(lái)的實(shí)例（例如var a = new Object()，a instanceof Object返回true），但實(shí)際instanceof的運(yùn)算規(guī)則上比這個(gè)更復(fù)雜。

//假設(shè)instanceof運(yùn)算符左邊是L，右邊是R
L instanceof R 
//instanceof運(yùn)算時(shí)，通過(guò)判斷L的原型鏈上是否存在R.prototype
L.__proto__.__proto__ ..... === R.prototype ？

//如果存在返回true 否則返回false
注意：instanceof運(yùn)算時(shí)會(huì)遞歸查找L的原型鏈，即L.__proto__.__proto__.__proto__.__proto__...直到找到了或者找到頂層為止。

所以一句話理解instanceof的運(yùn)算規(guī)則為：

instanceof檢測(cè)左側(cè)的__proto__原型鏈上，是否存在右側(cè)的prototype原型。

我們?cè)倥浜洗a來(lái)看一下就明白了：

//①構(gòu)造器Function的構(gòu)造器是它自身
Function.constructor=== Function;//true

//②構(gòu)造器Object的構(gòu)造器是Function（由此可知所有構(gòu)造器的constructor都指向Function）
Object.constructor === Function;//true



//③構(gòu)造器Function的__proto__是一個(gè)特殊的匿名函數(shù)function() {}
console.log(Function.__proto__);//function() {}

//④這個(gè)特殊的匿名函數(shù)的__proto__指向Object的prototype原型。
Function.__proto__.__proto__ === Object.prototype//true

//⑤Object的__proto__指向Function的prototype，也就是上面③中所述的特殊匿名函數(shù)
Object.__proto__ === Function.prototype;//true
Function.prototype === Function.__proto__;//true

Function.__proto__.__proto__ === Object.prototype;//true
Object.__proto__ === Function.prototype;//true

如果看完以上，你還覺(jué)得上面的關(guān)系看暈了的話，只需要記住下面兩個(gè)最重要的關(guān)系，其他關(guān)系就可以推導(dǎo)出來(lái)了：

1、所有的構(gòu)造器的constructor都指向Function

2、Function的prototype指向一個(gè)特殊匿名函數(shù)，而這個(gè)特殊匿名函數(shù)的__proto__指向Object.prototype

我們知道，在Js中一切皆為對(duì)象（Object），但是Js中并沒(méi)有類(lèi)（class）；Js是基于原型（prototype-based）來(lái)實(shí)現(xiàn)的面向?qū)ο螅∣OP）的編程范式的，但并不是所有的對(duì)象都擁有prototype這一屬性：

var a = {}; 
console.log(a.prototype);  //=> undefined
 
var b = function(){}; 
console.log(b.prototype);  //=> {}
 
var c = "Hello"; 
console.log(c.prototype);  //=> undefined

prototype是每個(gè)function定義時(shí)自帶的屬性，但是Js中function本身也是對(duì)象，我們先來(lái)看一下下面幾個(gè)概念的差別：
function是Js的一個(gè)關(guān)鍵詞，用于定義函數(shù)類(lèi)型的變量，有兩種語(yǔ)法形式：

function f1(){ 
  console.log("This is function f1!");
}
typeof(f1);  //=> "function"
 
var f2 = function(){ 
  console.log("This is function f2!");
}
typeof(f2);  //=> "function"

如果用更加面向?qū)ο蟮姆椒▉?lái)定義函數(shù)，可以用Function：

var f3 = new Function("console.log("This is function f3!");"); 
f3();        //=> "This is function f3!" 
typeof(f3);  //=> "function"
 
typeof(Function); //=> "function"

實(shí)際上Function就是一個(gè)用于構(gòu)造函數(shù)類(lèi)型變量的類(lèi)，或者說(shuō)是函數(shù)類(lèi)型實(shí)例的構(gòu)造函數(shù)（constructor）；與之相似有的Object或String、Number等，都是Js內(nèi)置類(lèi)型實(shí)例的構(gòu)造函數(shù)。比較特殊的是Object，它用于生成對(duì)象類(lèi)型，其簡(jiǎn)寫(xiě)形式為{}：

var o1 = new Object(); 
typeof(o1);      //=> "object"
 
var o2 = {}; 
typeof(o2);     //=> "object"
 
typeof(Object); //=> "function"

prototype和length是每一個(gè)函數(shù)類(lèi)型自帶的兩個(gè)屬性，而其它非函數(shù)類(lèi)型并沒(méi)有（開(kāi)頭的例子已經(jīng)說(shuō)明），這一點(diǎn)之所以比較容易被忽略或誤解，是因?yàn)樗蓄?lèi)型的構(gòu)造函數(shù)本身也是函數(shù)，所以它們自帶了prototype屬性：

除了prototype之外，Js中的所有對(duì)象（undefined、null等特殊情況除外）都有一個(gè)內(nèi)置的[[Prototype]]屬性，指向它“父類(lèi)”的prototype，這個(gè)內(nèi)置屬性在ECMA標(biāo)準(zhǔn)中并沒(méi)有給出明確的獲取方式，但是許多Js的實(shí)現(xiàn)（如Node、大部分瀏覽器等）都提供了一個(gè)__proto__屬性來(lái)指代這一[[Prototype]]，我們通過(guò)下面的例子來(lái)說(shuō)明實(shí)例中的__proto__是如何指向構(gòu)造函數(shù)的prototype的：

var Person = function(){}; 
Person.prototype.type = "Person"; 
Person.prototype.maxAge = 100;
 
var p = new Person(); 
console.log(p.maxAge); 
p.name = "rainy";
 
Person.prototype.constructor === Person;  //=> true 
p.__proto__ === Person.prototype;         //=> true 
console.log(p.prototype);                 //=> undefined

圖示解釋上面的代碼：

Person是一個(gè)函數(shù)類(lèi)型的變量，因此自帶了prototype屬性，prototype屬性中的constructor又指向Person本身；通過(guò)new關(guān)鍵字生成的Person類(lèi)的實(shí)例p1，通過(guò)__proto__屬性指向了Person的原型。這里的__proto__只是為了說(shuō)明實(shí)例p1在內(nèi)部實(shí)現(xiàn)的時(shí)候與父類(lèi)之間存在的關(guān)聯(lián)（指向父類(lèi)的原型），在實(shí)際操作過(guò)程中實(shí)例可以直接通過(guò).獲取父類(lèi)原型中的屬性，從而實(shí)現(xiàn)了繼承的功能。

var Obj = function(){}; 
var o = new Obj(); 
o.__proto__ === Obj.prototype;  //=> true 
o.__proto__.constructor === Obj; //=> true
 
Obj.__proto__ === Function.prototype; //=> true 
Obj.__proto__.constructor === Function; //=> true
 
Function.__proto__ === Function.prototype; //=> true 
Object.__proto__ === Object.prototype;     //=> false 
Object.__proto__ === Function.prototype;   //=> true
 
Function.__proto__.constructor === Function;//=> true 
Function.__proto__.__proto__;               //=> {} 
Function.__proto__.__proto__ === o.__proto__.__proto__; //=> true 
o.__proto__.__proto__.__proto__ === null;   //=> true

從上面的例子和圖解可以看出，prototype對(duì)象也有__proto__屬性，向上追溯一直到null

new關(guān)鍵詞的作用就是完成上圖所示實(shí)例與父類(lèi)原型之間關(guān)系的串接，并創(chuàng)建一個(gè)新的對(duì)象；instanceof關(guān)鍵詞的作用也可以從上圖中看出，實(shí)際上就是判斷__proto__（以及__proto__.__proto__...）所指向是否父類(lèi)的原型：

var Obj = function(){}; 
var o = new Obj();
 
o instanceof Obj; //=> true 
o instanceof Object; //=> true 
o instanceof Function; //=> false
 
o.__proto__ === Obj.prototype; //=> true 
o.__proto__.__proto__ === Object.prototype; //=> true 
o.__proto__.__proto__ === Function;  //=> false

原型鏈的結(jié)構(gòu)
1.原型鏈繼承就是利用就是修改原型鏈結(jié)構(gòu)( 增加、刪除、修改節(jié)點(diǎn)中的成員 ), 從而讓實(shí)例對(duì)象可以使用整個(gè)原型鏈中的所有成員( 屬性和方法 )
2.使用原型鏈繼承必須滿足屬性搜索原則

屬性搜索原則
1.構(gòu)造函數(shù) 對(duì)象原型鏈結(jié)構(gòu)圖

function Person (){}; var p = new Person();

2.{} 對(duì)象原型鏈結(jié)構(gòu)圖

3.數(shù)組的原型鏈結(jié)構(gòu)圖

4.Object.prototype對(duì)應(yīng)的構(gòu)造函數(shù)

總結(jié):
從本質(zhì)上理解:對(duì)象和函數(shù)都是保存在堆當(dāng)中的引用類(lèi)型,后面一系列的操作都是為了使用或者訪問(wèn)其屬性,那么無(wú)論是prototype還是_proto_都是函數(shù)或者Object自帶的指針，允許外界的其他一些函數(shù)或者Object去使用自己的一些屬性。

更多的文章請(qǐng)關(guān)注公眾號(hào)：碼客小棧，每天不定時(shí)的更新web好文