JavaScript之ES5的繼承

自從有了ES6的繼承後，ES5的繼承也退出了舞臺，在實際開發也不會用得著，但在面試或許用的著；

先看看ES6的繼承

 1 class Father{
 2             
 3             constructor(a){
 4                 console.log(a);
 5             }
 6             play(){
 7                 console.log("aaa");
 8             }
 9             static run(){
10                 console.log("static");
11             }
12         }
13         class Son extends Father{
14             constructor(){
15                 super();
16             }
17         }
18         var s=new Son();
19         s.play();
20         Father.run()
21         Son.run();

在ES6里只需要使用extends和super關鍵字即可繼承父類的方法和屬性(包括靜態)

在ES5里沒有這些關鍵字

ES5的繼承

ES5的五種種繼承方式：

1. 對象冒充繼承
2. 原型鏈繼承
3. 組合繼承
4. 原型式繼承
5. 寄生式繼承(重要)

• 對象冒充繼承

1 function Father(_r){
 2             this.r=_r;
 3             console.log("aa");
 4             console.log(this.r);
 5         }
 6         Father.a=3;
 7         Father.run=function(){
 8             console.log(Box.a);
 9         }
10 function Son(){
11             Father.call(this,3)；//改變this的指向，執行父類構造函數並傳參到父類
12        }
13        var b=new Son();//"aa",3
14        b.run();//TypeError

通過call或apply改變this指向,並執行了父類的構造函數

缺點：只能繼承超類的構造函數,無法繼承原型鏈上的方法

• 原型鏈繼承

 1 function Father(){
 2     console.log("aa");
 3         }
 4 Father.prototype.b=10;
 5         Father.prototype.play=function(){
 6             console.log(this.b);
 7         }
 8         Son.prototype=new Father();
 9         function Son(){
10         }        
11         var b=new Son();
12         b.play();//10

將父類的實例化對象賦值給子類的原型上實現的繼承

缺點：覆蓋子類原有的屬性和方法，只能執行父類的屬性和方法，無法執行父類的構造函數

• 組合繼承

　　前面的兩種繼承(冒充，原型鏈)各有特點，把這兩種繼承組合起來稱為組合繼承

 1  function Father(_r){
 2             this.r=_r;
 3             console.log("aa");
 4         }
 5 function Son(_r){
 6             Father.call(this,_r);//冒充，改變父類的this指向子類
 7         }
 8 Son.prototype=new Father(3);//原型鏈繼承
 9  var c=new Son(10);
10  

使用原型鏈繼承了父類的屬性和方法，使用對象冒充繼承了父類的構造函數

看起來很不錯的樣子，但這並不是完美的繼承方式；

缺點：會覆蓋子類原有的屬性和方法，因為原型鏈繼承會將父類實例化，提前執行了一次父類構造函數；當子類實例化對象後，實際上是執行了兩次父類的構造函數。

使用場景：子類原本沒有屬性和方法，父類構造函數沒有內容。

• 原型式繼承

為瞭解決執行兩次父類構造函數使用了一個中介，在繼承時就不會執行父類的構造函數

 1 function Father(_a){
 2             this.a=_a
 3         }
 4         Father.prototype.play=function(){
 5             console.log("aaa");
 6         }
 7             function Agent(){
 8 
 9             }
10             Agent.prototype=Father.prototype;
11             function Son(){
12                 
13             }
14             Son.prototype=new Agent();
15             var o=new Son();
16             o.play();//aaa

使用了Agent的類作為中介，將父類的原型複製後，再進行實例化繼承不會執行父類的構造函數；

缺點：雖然解決了構造函數執行兩次的問題，但是使用該方法繼承後，構造函數一次也不會執行。

• 寄生式繼承(完美繼承)

封裝了一個extend方法，該方法傳入兩個參數，分別是父類和子類

 1 function extend(subClass, supClass) {
 2         function Agent() {}
 3         Agent.prototype = supClass.prototype;
 4         var o = subClass.prototype;
 5         subClass.prototype = new Agent();
 6         if (Object.assign) {
 7           Object.assign(subClass.prototype, o);
 8         } else {
 9           if (Object.getOwnPropertyNames) {
10             var names = Object.getOwnPropertyNames(o);
11             for (var i = 0; i < names.length; i++) {
12               var desc = Object.getOwnPropertyDescriptor(names[i]);
13               Object.defineProperty(subClass.prototype, names[i], desc);
14             }
15           } else {
16             for (var prop in o) {
17               subClass.prototype[prop] = o[prop];
18             }
19           }
20         }
21         subClass.prototype.constructor = subClass; //防止子類的構造函數被覆蓋
22         if (supClass.prototype.constructor === Object) {
23           supClass.prototype.constructor = supClass; //防止父類類的構造函數被覆蓋
24         }
25         // 存儲父類，方便繼承構造函數調用
26         subClass.prototype.superClass = supClass;
27       }
28 //調用
29       function Father(_r) {
30         this.r = _r;
31         console.log("Father");
32       }
33       Father.prototype.play = function () {
34         console.log("play game");
35       };
36       function Ball(_r) {
37         this.superClass.call(this, _r);
38       }
39 40       var s = new Son(10);//Father
41       s.play();//play game

extend方法，使用了Object.assgin、Object.getOwnPropertyNames、Object.getOwnPropertyDescriptor、Object.defineProperty都存在相容問題，所以進行了判斷。

該方法繼承集合了前四種的優點，實現了ES5的完美繼承；

結語：

ES5對比ES6的繼承，麻煩太多太多，以後的實際工作也不會使用；

但是在面試的時候，面試官可能會問，多學一點總沒錯。