詳解JavaScript之ES5的繼承

更新時間：2020年07月08日 10:35:38 作者：阿吉萊加雷

這篇文章主要介紹了JavaScript之ES5的繼承的相關資料，文中示例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下

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

先看看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關鍵字即可繼承父類的方法和屬性(包括靜態(tài))

在ES5里沒有這些關鍵字

ES5的繼承

ES5的五種種繼承方式：

對象冒充繼承
原型鏈繼承
組合繼承
原型式繼承
寄生式繼承(重要)

對象冒充繼承

function Father(_r){
      this.r=_r;
      console.log("aa");
      console.log(this.r);
    }
    Father.a=3;
    Father.run=function(){
      console.log(Box.a);
    }
function Son(){
      Father.call(this,3)；//改變this的指向，執(zhí)行父類構造函數并傳參到父類
    }
    var b=new Son();//"aa",3
    b.run();//TypeError

通過call或apply改變this指向,并執(zhí)行了父類的構造函數

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

原型鏈繼承

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

將父類的實例化對象賦值給子類的原型上實現(xiàn)的繼承

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

組合繼承

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

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);

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

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

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

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

原型式繼承

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

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的類作為中介，將父類的原型復制后，再進行實例化繼承不會執(zhí)行父類的構造函數；

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

寄生式繼承(完美繼承)

封裝了一個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);
    }
    var s = new Son(10);//Father
    s.play();//play game

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

該方法繼承集合了前四種的優(yōu)點，實現(xiàn)了ES5的完美繼承；

結語：

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

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

以上就是詳解JavaScript之ES5的繼承的詳細內容，更多關于JavaScript ES5的繼承的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: