JavaScript之ES5的繼承

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

先看看ES6的繼承

class Father{
            
            constructor(a){
                console.log(a);
            }
            play(){
                console.log("aaa");
            }
            static run(){
                console.log("static");
            }
        }
        class Son extends Father{
            constructor(){
                super();
            }
        }
        var s=new Son();
        s.play();
        Father.run()
        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指向,並執行了父類的建構函式

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

• 原型鏈繼承

function Father(){
    console.log("aa");
        }
Father.prototype.b=10;
        Father.prototype.play=function(){
            console.log(this.b);
        }
        Son.prototype=new Father();
        function Son(){
        }        
        var b=new Son();
        b.play();//10

將父類的例項化物件賦值給子類的原型上實現的繼承

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

• 組合繼承

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

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

使用原型鏈繼承了父類的屬性和方法，使用物件冒充繼承了父類的建構函式

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

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

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

• 原型式繼承

為了解決執行兩次父類建構函式使用了一箇中介，在繼承時就不會執行父類的建構函式

function Father(_a){
            this.a=_a
        }
        Father.prototype.play=function(){
            console.log("aaa");
        }
            function Agent(){

            }
            Agent.prototype=Father.prototype;
            function Son(){
                
            }
            Son.prototype=new Agent();
            var o=new Son();
            o.play();//aaa

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

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

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

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

function extend(subClass, supClass) {
        function Agent() {}
        Agent.prototype = supClass.prototype;
        var o = subClass.prototype;
        subClass.prototype = new Agent();
        if (Object.assign) {
          Object.assign(subClass.prototype, o);
        } else {
          if (Object.getOwnPropertyNames) {
            var names = Object.getOwnPropertyNames(o);
            for (var i = 0; i < names.length; i++) {
              var desc = Object.getOwnPropertyDescriptor(names[i]);
              Object.defineProperty(subClass.prototype, names[i], desc);
            }
          } else {
            for (var prop in o) {
              subClass.prototype[prop] = o[prop];
            }
          }
        }
        subClass.prototype.constructor = subClass; //防止子類的建構函式被覆蓋
        if (supClass.prototype.constructor === Object) {
          supClass.prototype.constructor = supClass; //防止父類類的建構函式被覆蓋
        }
        // 儲存父類，方便繼承建構函式呼叫
        subClass.prototype.superClass = supClass;
      }
//呼叫
      function Father(_r) {
        this.r = _r;
        console.log("Father");
      }
      Father.prototype.play = function () {
        console.log("play game");
      };
      function Ball(_r) {
        this.superClass.call(this, _r);
      }
40       var s = new Son(10);//Father
      s.play();//play game

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

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

 

結語：

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

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