一：理解建構函式原型(prototype)機制
prototype是javascript實現與管理繼承的一種機制，也是物件導向的設計思想.建構函式的原型儲存著引用物件的一個指標，該指標指向與一個原型物件，物件內部儲存著函式的原始屬性和方法；我們可以藉助prototype屬性，可以訪問原型內部的屬性和方法。
當建構函式被實列化後，所有的例項物件都可以訪問建構函式的原型成員，如果在原型中宣告一個成員，所有的實列方法都可以共享它，比如如下程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// 建構函式A 它的原型有一個getName方法 function A(name){ this.name = name; } A.prototype.getName = function(){ return this.name; } // 實列化2次後 該2個實列都有原型getName方法；如下程式碼 var instance1 = new A("longen1"); var instance2 = new A("longen2"); console.log(instance1.getName()); //longen1 console.log(instance2.getName()); // longen2 |
原型具有普通物件結構，可以將任何普通物件設定為原型物件; 一般情況下，物件都繼承與Object,也可以理解Object是所有物件的超類,Object是沒有原型的，而建構函式擁有原型，因此實列化的物件也是Object的實列，如下程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// 實列化物件是建構函式的實列 console.log(instance1 instanceof A); //true console.log(instance2 instanceof A); // true // 實列化物件也是Object的實列 console.log(instance1 instanceof Object); //true console.log(instance2 instanceof Object); //true //Object 物件是所有物件的超類，因此建構函式也是Object的實列 console.log(A instanceof Object); // true // 但是實列化物件 不是Function物件的實列 如下程式碼 console.log(instance1 instanceof Function); // false console.log(instance2 instanceof Function); // false // 但是Object與Function有關係 如下程式碼說明 console.log(Function instanceof Object); // true console.log(Object instanceof Function); // true |
如上程式碼，Function是Object的實列，也可以是Object也是Function的實列;他們是2個不同的構造器，我們繼續看如下程式碼:
|
1 2 3 4 5 6 7 |
var f = new Function(); var o = new Object(); console.log("------------"); console.log(f instanceof Function); //true console.log(o instanceof Function); // false console.log(f instanceof Object); // true console.log(o instanceof Object); // true |
我們明白，在原型上增加成員屬性或者方法的話，它被所有的實列化物件所共享屬性和方法，但是如果實列化物件有和原型相同的成員成員名字的話，那麼它取到的成員是本實列化物件，如果本實列物件中沒有的話，那麼它會到原型中去查詢該成員，如果原型找到就返回，否則的會返回undefined，如下程式碼測試
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function B(){ this.name = "longen2"; } B.prototype.name = "AA"; B.prototype.getName = function(){ return this.name; }; var b1 = new B(); // 在本實列查詢，找到就返回，否則到原型查詢 console.log(b1.name); // longen2 // 在本實列沒有找到該方法，就到原型去查詢 console.log(b1.getName());//longen2 // 如果在本實列沒有找到的話，到原型上查詢也沒有找到的話，就返回undefined console.log(b1.a); // undefined // 現在我使用delete運算子刪除本地實列屬性，那麼取到的是就是原型屬性了，如下程式碼： delete b1.name; console.log(b1.name); // AA |
二：理解原型域鏈的概念
原型的優點是能夠以物件結構為載體，建立大量的實列，這些實列能共享原型中的成員(屬性和方法);同時也可以使用原型實現物件導向中的繼承機制~ 如下程式碼：下面我們來看這個建構函式AA和建構函式BB，當BB.prototype = new AA(11);執行這個的時候，那麼B就繼承與A，B中的原型就有x的屬性值為11
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function AA(x){ this.x = x; } function BB(x) { this.x = x; } BB.prototype = new AA(11); console.log(BB.prototype.x); //11 // 我們再來理解原型繼承和原型鏈的概念，程式碼如下，都有註釋 function A(x) { this.x = x; } // 在A的原型上定義一個屬性x = 0 A.prototype.x = 0; function B(x) { this.x = x; } B.prototype = new A(1); |
實列化A new A(1)的時候 在A函式內this.x =1， B.prototype = new A(1);B.prototype 是A的實列 也就是B繼承於A， 即B.prototype.x = 1; 如下程式碼：
|
1 2 3 4 5 6 |
console.log(B.prototype.x); // 1 // 定義C的建構函式 function C(x) { this.x = x; } C.prototype = new B(2); |
C.prototype = new B(2); 也就是C.prototype 是B的實列，C繼承於B；那麼new B(2)的時候 在B的建構函式內 this.x = 2；那麼 C的原型上會有一個屬性x =2 即C.prototype.x = 2; 如下程式碼：
|
1 |
console.log(C.prototype.x); // 2 |
下面是實列化 var d = new C(3); 實列化C的建構函式時候，那麼在C的建構函式內this.x = 3; 因此如下列印實列化後的d.x = 3；如下程式碼：
|
1 2 |
var d = new C(3); console.log(d.x); // 3 |
刪除d.x 再訪問d.x的時候 本實列物件被刪掉，只能從原型上去查詢；由於C.prototype = new B(2); 也就是C繼承於B，因此C的原型也有x = 2；即C.prototype.x = 2; 如下程式碼：
|
1 2 |
delete d.x; console.log(d.x); //2 |
刪除C.prototype.x後，我們從上面程式碼知道，C是繼承於B的，自身的原型被刪掉後，會去查詢父元素的原型鏈，因此在B的原型上找到x =1; 如下程式碼：
|
1 2 |
delete C.prototype.x; console.log(d.x); // 1 |
當刪除B的原型屬性x後，由於B是繼承於A的，因此會從父元素的原型鏈上查詢A原型上是否有x的屬性，如果有的話，就返回，否則看A是否有繼承，沒有繼承的話，繼續往Object上去查詢，如果沒有找到就返回undefined 因此當刪除B的原型x後，delete B.prototype.x; 列印出A上的原型x=0; 如下程式碼：
|
1 2 3 4 5 6 |
delete B.prototype.x; console.log(d.x); // 0 // 繼續刪除A的原型x後 結果沒有找到，就返回undefined了; delete A.prototype.x; console.log(d.x); // undefined |
在javascript中，一切都是物件，Function和Object都是函式的實列;建構函式的父原型指向於Function原型，Function.prototype的父原型指向與Object的原型，Object的父原型也指向與Function原型，Object.prototype是所有原型的頂層;
如下程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
Function.prototype.a = function(){ console.log("我是父原型Function"); } Object.prototype.a = function(){ console.log("我是 父原型Object"); } function A(){ this.a = "a"; } A.prototype = { B: function(){ console.log("b"); } } // Function 和 Object都是函式的實列 如下： console.log(A instanceof Function); // true console.log(A instanceof Object); // true // A.prototype是一個物件，它是Object的實列，但不是Function的實列 console.log(A.prototype instanceof Function); // false console.log(A.prototype instanceof Object); // true // Function是Object的實列 同是Object也是Function的實列 console.log(Function instanceof Object); // true console.log(Object instanceof Function); // true /* * Function.prototype是Object的實列 但是Object.prototype不是Function的實列 * 說明Object.prototype是所有父原型的頂層 */ console.log(Function.prototype instanceof Object); //true console.log(Object.prototype instanceof Function); // false |
三：理解原型繼承機制
建構函式都有一個指標指向原型，Object.prototype是所有原型物件的頂層，比如如下程式碼：
|
1 2 3 |
var obj = {}; Object.prototype.name = "tugenhua"; console.log(obj.name); // tugenhua |
給Object.prototype 定義一個屬性，通過字面量構建的物件的話，都會從父類那邊獲取Object.prototype的屬性；
從上面程式碼我們知道，原型繼承的方法是：假如A需要繼承於B，那麼A.prototype(A的原型) = new B()（作為B的實列） 即可實現A繼承於B; 因此我們下面可以初始化一個空的建構函式;然後把物件賦值給建構函式的原型，然後返回該建構函式的實列； 即可實現繼承; 如下程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
if(typeof Object.create !== 'function') { Object.create = function(o) { var F = new Function(); F.prototype = o; return new F(); } } var a = { name: 'longen', getName: function(){ return this.name; } }; var b = {}; b = Object.create(a); console.log(typeof b); //object console.log(b.name); // longen console.log(b.getName()); // longen |
如上程式碼:我們先檢測Object是否已經有Object.create該方法;如果沒有的話就建立一個； 該方法內建立一個空的構造器，把引數物件傳遞給建構函式的原型，最後返回該建構函式的實列，就實現了繼承方式；如上測試程式碼：先定義一個a物件，有成員屬性name=’longen’，還有一個getName()方法;最後返回該name屬性; 然後定義一個b空物件，使用Object.create(a);把a物件繼承給b物件，因此b物件也有屬性name和成員方法getName();
理解原型查詢原理：物件查詢先在該建構函式內查詢對應的屬性，如果該物件沒有該屬性的話，
那麼javascript會試著從該原型上去查詢，如果原型物件中也沒有該屬性的話，那麼它們會從原型中的原型去查詢，直到查詢的Object.prototype也沒有該屬性的話，那麼就會返回undefined;因此我們想要僅在該物件內查詢的話，為了提高效能，我們可以使用hasOwnProperty()來判斷該物件內有沒有該屬性，如果有的話，就執行程式碼(使用for-in迴圈查詢)：如下：
|
1 2 3 4 5 6 7 8 9 10 |
var obj = { "name":'tugenhua', "age":'28' }; // 使用for-in迴圈 for(var i in obj) { if(obj.hasOwnProperty(i)) { console.log(obj[i]); //tugenhua 28 } } |
如上使用for-in迴圈查詢物件裡面的屬性，但是我們需要明白的是：for-in迴圈查詢物件的屬性，它是不保證順序的，for-in迴圈和for迴圈；最本質的區別是：for迴圈是有順序的，for-in迴圈遍歷物件是無序的，因此我們如果需要物件保證順序的話，可以把物件轉換為陣列來，然後再使用for迴圈遍歷即可;
下面我們來談談原型繼承的優點和缺點
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// 先看下面的程式碼： // 定義建構函式A，定義特權屬性和特權方法 function A(x) { this.x1 = x; this.getX1 = function(){ return this.x1; } } // 定義建構函式B，定義特權屬性和特權方法 function B(x) { this.x2 = x; this.getX2 = function(){ return this.x1 + this.x2; } } B.prototype = new A(1); |
B.prototype = new A(1);這句程式碼執行的時候,B的原型繼承於A，因此B.prototype也有A的屬性和方法,即：B.prototype.x1 = 1; B.prototype.getX1 方法；但是B也有自己的特權屬性x2和特權方法getX2; 如下程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function C(x) { this.x3 = x; this.getX3 = function(){ return this.x3 + this.x2; } } C.prototype = new B(2); C.prototype = new B(2);這句程式碼執行的時候,C的原型繼承於B，因此C.prototype.x2 = 2; C.prototype.getX2方法且C也有自己的特權屬性x3和特權方法getX3, var b = new B(2); var c = new C(3); console.log(b.x1); // 1 console.log(c.x1); // 1 console.log(c.getX3()); // 5 console.log(c.getX2()); // 3 var b = new B(2); |
實列化B的時候 b.x1 首先會在建構函式內查詢x1屬性，沒有找到，由於B的原型繼承於A，因此A有x1屬性，因此B.prototype.x1 = 1找到了;var c = new C(3); 實列化C的時候，從上面的程式碼可以看到C繼承於B，B繼承於A，因此在C函式中沒有找到x1屬性，會往原型繼續查詢，直到找到父元素A有x1屬性，因此c.x1 = 1;c.getX3()方法; 返回this.x3+this.x2 this.x3 = 3;this.x2 是B的屬性，因此this.x2 = 2;c.getX2(); 查詢的方法也一樣，不再解釋
prototype的缺點與優點如下：
優點是：能夠允許多個物件實列共享原型物件的成員及方法，
缺點是：1. 每個建構函式只有一個原型，因此不直接支援多重繼承;
2. 不能很好地支援多引數或動態引數的父類。在原型繼承階段，使用者還不能決定以
什麼引數來實列化建構函式。
四：理解使用類繼承(繼承的更好的方案)
類繼承也叫做建構函式繼承，在子類中執行父類的建構函式；實現原理是：可以將一個建構函式A的方法賦值給另一個建構函式B，然後呼叫該方法，使建構函式A在建構函式B內部被執行，這時候建構函式B就擁有了建構函式A中的屬性和方法，這就是使用類繼承實現B繼承與A的基本原理；
如下程式碼實現demo：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function A(x) { this.x = x; this.say = function(){ return this.x; } } function B(x,y) { this.m = A; // 把建構函式A作為一個普通函式引用給臨時方法m this.m(x); // 執行建構函式A; delete this.m; // 清除臨時方法this.m this.y = y; this.method = function(){ return this.y; } } var a = new A(1); var b = new B(2,3); console.log(a.say()); //輸出1, 執行建構函式A中的say方法 console.log(b.say()); //輸出2, 能執行該方法說明被繼承了A中的方法 console.log(b.method()); // 輸出3， 建構函式也擁有自己的方法 |
上面的程式碼實現了簡單的類繼承的基礎，但是在複雜的程式設計中是不會使用上面的方法的，因為上面的程式碼不夠嚴謹；程式碼的耦合性高；我們可以使用更好的方法如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
function A(x) { this.x = x; } A.prototype.getX = function(){ return this.x; } // 例項化A var a = new A(1); console.log(a.x); // 1 console.log(a.getX()); // 輸出1 // 現在我們來建立建構函式B，讓其B繼承與A，如下程式碼： function B(x,y) { this.y = y; A.call(this,x); } B.prototype = new A(); // 原型繼承 console.log(B.prototype.constructor); // 輸出建構函式A，指標指向與建構函式A B.prototype.constructor = B; // 重新設定建構函式，使之指向B console.log(B.prototype.constructor); // 指向建構函式B B.prototype.getY = function(){ return this.y; } var b = new B(1,2); console.log(b.x); // 1 console.log(b.getX()); // 1 console.log(b.getY()); // 2 // 下面是演示對建構函式getX進行重寫的方法如下： B.prototype.getX = function(){ return this.x; } var b2 = new B(10,20); console.log(b2.getX()); // 輸出10 |
下面我們來分析上面的程式碼：
在建構函式B內，使用A.call(this,x);這句程式碼的含義是：我們都知道使用call或者apply方法可以改變this指標指向，從而可以實現類的繼承，因此在B建構函式內，把x的引數傳遞給A建構函式，並且繼承於建構函式A中的屬性和方法；
使用這句程式碼：B.prototype = new A(); 可以實現原型繼承，也就是B可以繼承A中的原型所有的方法；console.log(B.prototype.constructor); 列印出輸出建構函式A，指標指向與建構函式A；我們明白的是，當定義建構函式時候，其原型物件預設是一個Object型別的一個例項，其構造器預設會被設定為建構函式本身，如果改動建構函式prototype屬性值，使其指向於另一個物件的話，那麼新物件就不會擁有原來的constructor的值，比如第一次列印console.log(B.prototype.constructor); 指向於被例項化後的建構函式A，重寫設定B的constructor的屬性值的時候，第二次列印就指向於本身B；因此B繼承與構造A及其原型的所有屬性和方法，當然我們也可以對建構函式B重寫建構函式A中的方法，如上面最後幾句程式碼是對建構函式A中的getX方法進行重寫，來實現自己的業務~；
五：建議使用封裝類實現繼承
封裝類實現繼承的基本原理：先定義一個封裝函式extend；該函式有2個引數，Sub代表子類，Sup代表超類；在函式內，先定義一個空函式F, 用來實現功能中轉，先設定F的原型為超類的原型，然後把空函式的例項傳遞給子類的原型，使用一個空函式的好處是：避免直接例項化超類可能會帶來系統效能問題，比如超類的例項很大的話，例項化會佔用很多記憶體；
如下程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
function extend(Sub,Sup) { //Sub表示子類，Sup表示超類 // 首先定義一個空函式 var F = function(){}; // 設定空函式的原型為超類的原型 F.prototype = Sup.prototype; // 例項化空函式，並把超類原型引用傳遞給子類 Sub.prototype = new F(); // 重置子類原型的構造器為子類自身 Sub.prototype.constructor = Sub; // 在子類中儲存超類的原型,避免子類與超類耦合 Sub.sup = Sup.prototype; if(Sup.prototype.constructor === Object.prototype.constructor) { // 檢測超類原型的構造器是否為原型自身 Sup.prototype.constructor = Sup; } } 測試程式碼如下： // 下面我們定義2個類A和類B，我們目的是實現B繼承於A function A(x) { this.x = x; this.getX = function(){ return this.x; } } A.prototype.add = function(){ return this.x + this.x; } A.prototype.mul = function(){ return this.x * this.x; } // 建構函式B function B(x){ A.call(this,x); // 繼承建構函式A中的所有屬性及方法 } extend(B,A); // B繼承於A var b = new B(11); console.log(b.getX()); // 11 console.log(b.add()); // 22 console.log(b.mul()); // 121 |
注意：在封裝函式中，有這麼一句程式碼：Sub.sup = Sup.prototype; 我們現在可以來理解下它的含義：
比如在B繼承與A後，我給B函式的原型再定義一個與A相同的原型相同的方法add();
如下程式碼
|
1 2 3 4 5 6 |
extend(B,A); // B繼承於A var b = new B(11); B.prototype.add = function(){ return this.x + "" + this.x; } console.log(b.add()); // 1111 |
那麼B函式中的add方法會覆蓋A函式中的add方法；因此為了不覆蓋A類中的add()方法，且呼叫A函式中的add方法；可以如下編寫程式碼：
|
1 2 3 4 5 |
B.prototype.add = function(){ //return this.x + "" + this.x; return B.sup.add.call(this); } console.log(b.add()); // 22 |
B.sup.add.call(this); 中的B.sup就包含了建構函式A函式的指標，因此包含A函式的所有屬性和方法；因此可以呼叫A函式中的add方法；
如上是實現繼承的幾種方式，類繼承和原型繼承，但是這些繼承無法繼承DOM物件，也不支援繼承系統靜態物件，靜態方法等；比如Date物件如下：
|
1 2 3 4 5 6 |
// 使用類繼承Date物件 function D(){ Date.apply(this,arguments); // 呼叫Date物件，對其引用，實現繼承 } var d = new D(); console.log(d.toLocaleString()); // [object object] |
如上程式碼執行列印出object，我們可以看到使用類繼承無法實現系統靜態方法date物件的繼承，因為他不是簡單的函式結構，對宣告，賦值和初始化都進行了封裝，因此無法繼承；
下面我們再來看看使用原型繼承date物件；
|
1 2 3 4 |
function D(){} D.prototype = new D(); var d = new D(); console.log(d.toLocaleString());//[object object] |
我們從程式碼中看到，使用原型繼承也無法繼承Date靜態方法；但是我們可以如下封裝程式碼繼承：
|
1 2 3 4 5 6 7 8 9 |
function D(){ var d = new Date(); // 例項化Date物件 d.get = function(){ // 定義本地方法，間接呼叫Date物件的方法 console.log(d.toLocaleString()); } return d; } var d = new D(); d.get(); // 2015/12/21 上午12:08:38 |
六：理解使用複製繼承
複製繼承的基本原理是：先設計一個空物件，然後使用for-in迴圈來遍歷物件的成員，將該物件的成員一個一個複製給新的空物件裡面;這樣就實現了複製繼承了;如下程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function A(x,y) { this.x = x; this.y = y; this.add = function(){ return this.x + this.y; } } A.prototype.mul = function(){ return this.x * this.y; } var a = new A(2,3); var obj = {}; for(var i in a) { obj[i] = a[i]; } console.log(obj); // object console.log(obj.x); // 2 console.log(obj.y); // 3 console.log(obj.add()); // 5 console.log(obj.mul()); // 6 |
如上程式碼：先定義一個建構函式A，函式裡面有2個屬性x,y,還有一個add方法，該建構函式原型有一個mul方法，首先實列化下A後，再建立一個空物件obj，遍歷物件一個個複製給空物件obj，從上面的列印效果來看，我們可以看到已經實現了複製繼承了;對於複製繼承，我們可以封裝成如下方法來呼叫:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 為Function擴充套件複製繼承方法 Function.prototype.extend = function(o) { for(var i in o) { //把引數物件的成員複製給當前物件的建構函式原型物件 this.constructor.prototype[i] = o[i]; } } // 測試程式碼如下： var o = function(){}; o.extend(new A(1,2)); console.log(o.x); // 1 console.log(o.y); // 2 console.log(o.add()); // 3 console.log(o.mul()); // 2 |
上面封裝的擴充套件繼承方法中的this物件指向於當前實列化後的物件，而不是指向於建構函式本身，因此要使用原型擴充套件成員的話，就需要使用constructor屬性來指向它的構造器，然後通過prototype屬性指向建構函式的原型；
複製繼承有如下優點：
1. 它不能繼承系統核心物件的只讀方法和屬性
2. 如果物件資料非常多的話，這樣一個個複製的話，效能是非常低的;
3. 只有物件被實列化後，才能給遍歷物件的成員和屬性，相對來說不夠靈活;
4. 複製繼承只是簡單的賦值，所以如果賦值的物件是引用型別的物件的話，可能會存在一些副作用;如上我們看到有如上一些缺點，下面我們可以使用clone(克隆的方式)來優化下：
基本思路是：為Function擴充套件一個方法，該方法能夠把引數物件賦值賦值一個空建構函式的原型物件，然後實列化建構函式並返回實列物件，這樣該物件就擁有了該物件的所有成員;程式碼如下：
|
1 2 3 4 5 6 7 8 9 10 11 |
Function.prototype.clone = function(o){ function Temp(){}; Temp.prototype = o; return Temp(); } // 測試程式碼如下： Function.clone(new A(1,2)); console.log(o.x); // 1 console.log(o.y); // 2 console.log(o.add()); // 3 console.log(o.mul()); // 2 |