JavaScript繼承理解：ES5繼承方式+ES6Class繼承對比

liaoyg8023 發布于2019-08-26 12:09 / 2529人閱讀

摘要：寄生組合式繼承的繼承方式有多種主要有原型鏈繼承借用構造函數組合式繼承寄生式繼承和寄生組合式繼承。中利用定義類，實現類的繼承子類里調用父類構造函數實現實例屬性和方法的繼承子類原型繼承父類原型，實現原型對象上方法的繼承。

JavaScript中實現繼承

??在JavaScript中實現繼承主要實現以下兩方面的屬性和方法的繼承，這兩方面相互互補，既有共享的屬性和方法，又有特有的屬性和方法。

實例屬性和方法的繼承：
目的：每個實例都有自己特有的屬性和方法。特別是引用類型屬性，如果被共享，所有實例都可修改引用類型屬性，并且反應到所有實例中。

原型屬性和方法的繼承：
目的：在繼承中實現屬性和方法的共享。避免每創建一次實例，都要新建一次屬性和方法。

ES5—寄生組合式繼承

??ES5的繼承方式有多種：主要有原型鏈繼承、借用構造函數、組合式繼承、寄生式繼承和寄生組合式繼承。寄生組合式繼承集組合式繼承和寄生式繼承的優點于一身，是ES5中，基于類型繼承的最有效方式。
??接下來基于寄生組合式繼承對ES5實現繼承的方面進行解釋。

//父類
function SuperType(name){
    //父類實例屬性
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
//父類原型方法
SuperType.prototype.sayName = function(){
    alert(this.name);
};
//子類
function SubType(name, age){
    SuperType.call(this, name);//1.借用構造函數：繼承父類的實例屬性；
    this.age = age;
}
//2.寄生式繼承：將父類原型的副本強制賦值給子類原型，實現繼承父類的原型方法。
inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge = function(){
    alert(this.age);
};

function inheritPrototype(subType, superType){
    var prototype = object(superType.prototype); //創建父類原型的副本
    prototype.constructor = subType; //將該副本的constructor屬性指向子類
    subType.prototype = prototype; //將子類的原型屬性指向副本
}

??以上示例就是ES5中寄生組合式繼承的一個例子，如何實現子類繼承父類？

借用構造函數SuperType.call(this, name);：當new SubType()創建子類實例時，首先調用父類構造函數，實現了子類實例繼承父類的實例屬性和方法；

寄生式繼承inheritPrototype(SubType, SuperType);：將父類原型副本強制替換成子類原型（1.副本constructor指向子類；2.子類prototype指向副本），使得子類原型包含父類原型中的所有屬性和方法，實現了原型屬性和方法的繼承。

ES6中Class繼承

??ES5中通過函數創建類型并基于原型實現繼承的方式與其他面向對象的語言相比確實比較另類，沒有那么簡單明了；ES6就提供了更加接近傳統語言的寫法，引入了類的概念。

通過class關鍵字定義類

class super{
    constructor(name,color){
        this.name=name;
        this.color=["red","blue","green"];
    }
    sayName(){
        alert(this.name);
    }
}

 1. constructor為構造函數，如果非顯示創建構造函數，定義類時也會自動創建構造函數；
 2. 通過`this`定義的屬性和方法屬于實例屬性和方法；否則都是定義在原型上的屬性和方法;
 3. class類中定義的方法`constructor、sayName`都屬于原型方法。

extends實現類的繼承

class Person{
    constructor(name,color){
        this.name=name;
        this.color=["red","blue","green"];
    }
    sayName(){
        alert(this.name);
    }
}

class Student extends Person(){
    constructor(name,color,score){
        super(name,color);//調用父類構造函數，this指向子類
        this.score=score;
    }
    showScore(){
        alert(this.score);
    }
}

let stu1=new Student("xuxu",["white","black","pink"],90);
stu1.sayName();//"xuxu"
stu1.showScore();//90

 1. 子類構造函數中調用父類構造函數，實現了子類繼承父類的實例屬性和方法；
 2. 通過extends，子類原型繼承父類原型上的屬性和方法：
    - Student.__proto__=Person;//作為對象，子類原型等于父類（構造函數的繼承）
    - Student.prototype.__proto__=Person.prototype;//作為構造函數，子類原型對象是父類原型對象的實例。
 3. 子類靜態方法繼承父類靜態方法
    - 靜態方法的定義：關鍵字static；
    - 調用方法：類名調用（而不是實例調用）；
    - 普通方法中，super作對象表示父類原型（用來調用父類原型方法）；
      靜態方法中super作對象表示父類（用來調用父類靜態方法）。
    - 普通方法中this指向實例對象；靜態方法中hits指向當前子類。

prototype和__proto__相互關系

對象（實例和原型對象）有__proto__屬性，構造函數有prototype屬性，原型對象有constructor屬性。
??假設class B extends A，實例對象分別是insB、insA:

A.prototype.constructor=A;//類的原型的構造函數指向類本身。

insA.__proto__=A.prototype;//類的實例的原型指向創建它的構造函數的原型。

B.__proto__=A;//作為對象，子類的原型等于父類

B.prototype.__proto__=A.prototype;//作為構造函數子類原型繼承父類原型

insB.__proto__.__proto__=insA.__proto__;//子類實例的原型的原型指向父類實例的原型

總結

ES5中：

利用借用構造函數實現 實例屬性和方法的繼承 ；

利用原型鏈或者寄生式繼承實現 共享的原型屬性和方法的繼承 。

ES6中：

利用class定義類，extends實現類的繼承；

子類constructor里調用super()（父類構造函數）實現 實例屬性和方法的繼承；

子類原型繼承父類原型，實現 原型對象上方法的繼承。

GPU云服務器云服務器繼承方式 php 類繼承方式 javascript繼承 javascript繼承方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108117.html

為什么都說js 里面任何對象最終都繼承了Object對象

摘要：今天閑來無事，看見幾行小字。又說所有對象，繼承終是。強行押韻一波這首詩的意思就是說的我今天沒有什么事情，然后無意中又在網上看到了任何對象都是從對象繼承而來的這句話。一時興起，便去驗證這句話。今天閑來無事，看見幾行小字。又說所有對象，繼承終是Obj。—— 強行押韻一波這首詩的意思就是說的我今天沒有什么事情，然后無意中又在網上看到了任何對象都是從Object對象繼承而來的這句話。一時興...

Gemini 2019-08-26 10:29 評論0 收藏0
es6class揭秘

摘要：語法在中運行以下代碼調試觀察的值。以上的繼承其實就是我們說的寄生式組合繼承，也是中最常用的繼承模式。在es6中，新增了class關鍵字用于定義一個類，但是本質上并沒有給javascript增加新的oop機制，因為javascript原型繼承以及構造函數式聲明使人感到晦澀難懂，添加class的目的就是為了掩蓋它底層的機制，使得我們不用直接接觸這些概念，相當于一個語法糖。 class語法...

piapia 2019-08-21 11:42 評論0 收藏0
刷《一年半經驗，百度、有贊、阿里面試總結》·手記

摘要：在掘金上看到了一位大佬發了一篇很詳細的面試記錄文章一年半經驗，百度有贊阿里面試總結，為了查漏補缺，抽空就詳細做了下。在掘金上看到了一位大佬發了一篇很詳細的面試記錄文章-《一年半經驗，百度、有贊、阿里面試總結》，為了查漏補缺，抽空就詳細做了下。（估計只有我這么無聊了哈哈哈）有給出的或者有些不完善的答案，也盡力給出/完善了（可能有錯，大家自行辨別）。有些很困難的題目（例如實現Promi...

codeKK 2019-08-23 13:48 評論0 收藏0
刷《一年半經驗，百度、有贊、阿里面試總結》·手記

摘要：在掘金上看到了一位大佬發了一篇很詳細的面試記錄文章一年半經驗，百度有贊阿里面試總結，為了查漏補缺，抽空就詳細做了下。在掘金上看到了一位大佬發了一篇很詳細的面試記錄文章-《一年半經驗，百度、有贊、阿里面試總結》，為了查漏補缺，抽空就詳細做了下。（估計只有我這么無聊了哈哈哈）有給出的或者有些不完善的答案，也盡力給出/完善了（可能有錯，大家自行辨別）。有些很困難的題目（例如實現Promi...

NusterCache 2019-08-29 17:27 評論0 收藏0
javascript繼承 --- 圖解 ES5繼承 VS ES6繼承

摘要：繼承的繼承可以簡單的認為就是上篇文章中的寄生組合繼承模型幾乎一模一樣，只是在語法結構上多了和關鍵字，另外一個區別就是父類和子類通過連接。 ES5繼承 VS ES6繼承前言 ES6 已經發展了很長時間里 javascript相對于其他例如java等是一門比較怪異的語言, 由于其歷史原因其繼承機制和對象生成方式被人詬病. ES6 的出現將徹底改變這一現狀, ES6 引入了新的生成對象(類...

陸斌 2019-08-26 11:35 評論0 收藏0