JavaScript常用6大繼承方式解析

yearsj 發布于2019-08-23 18:10 / 2202人閱讀

摘要：特點跟借用構造函數模式一樣，每次創建對象都會創建一遍方法。缺點寄生組合式繼承使用時說明解決了組合繼承存在的問題特點只調用了一次構造函數，并且因此避免了在上面創建不必要的多余的屬性原型鏈還能保持不變還能夠正常使用和缺點參考資料

原型鏈繼承

//父類
function Person(name, age) {
   this.name = name;
   this.age = age;
   this.play = [1, 2, 3];
   this.setName = function () { }
}
Person.prototype.setAge = function () { }
//子類
function Student(price) {
   this.price = price;
   this.setScore = function () { }
}
Student.prototype = new Person() // 核心，子類型的原型為父類型的一個實例對象
var s1 = new Student(15000)
var s2 = new Student(14000)
console.log(s1,s2)

說明：
實現的本質是通過將子類的原型指向了父類的實例。所以子類的實例就可以通過__proto__訪問到 Student.prototype 也就是Person的實例，
這樣就可以訪問到父類的私有方法，然后再通過__proto__指向父類的prototype就可以獲得到父類原型上的方法。
子類繼承父類的屬性和方法是將父類的私有屬性和公有方法都作為自己的公有屬性和方法。

特點：
父類新增原型方法/原型屬性，子類都能訪問到
簡單，易于實現

缺點：
無法實現多繼承
來自原型對象的所有屬性被所有實例共享
創建子類實例時，無法向父類構造函數傳參
要想為子類新增屬性和方法，必須要在Student.prototype = new Person() 之后執行，不能放到構造器中

構造函數繼承

function Person(name, age) {
    this.name = name,
    this.age = age,
    this.setName = function () {}
}
Person.prototype.setAge = function () {}
function Student(name, age, price) {
    Person.call(this, name, age)  // 核心，相當于: this.Person(name, age)
    /*this.name = name
    this.age = age*/
    this.price = price
}
var s1 = new Student("Tom", 20, 15000)

說明：
就是將子類中德變量在父類中執行一遍。只能繼承父類的屬性和方法，如果父類的原型還有方法和屬性，子類是拿不到的。

特點：
解決了原型鏈繼承中子類實例共享父類引用屬性的問題
創建子類實例時，可以向父類傳遞參數
可以實現多繼承(call多個父類對象)

缺點：
實例并不是父類的實例，只是子類的實例
只能繼承父類的實例屬性和方法，不能繼承原型屬性和方法
無法實現函數復用，每個子類都有父類實例函數的副本，影響性能

組合繼承

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.setAge = function () { }
}
Person.prototype.setAge = function () {
    console.log("111");
}
function Student(name, age, price) {
    Person.call(this,name,age);//核心
    this.price = price;
    this.setScore = function () { }
}
Student.prototype = new Person();//核心
Student.prototype.constructor = Student//核心，組合繼承是需要修復構造函數指向的
Student.prototype.sayHello = function () { }
var s1 = new Student("Tom", 20, 15000);
var s2 = new Student("Jack", 22, 14000);
console.log(s1);
console.log(s1.constructor); //Student
console.log(s2.constructor); //Person

說明：
融合原型鏈繼承和構造函數的優點，并過濾掉其缺點，是 JavaScript 中最常用的繼承模式。
先在使用構造函數繼承時執行一遍父類的構造函數，又在實現子類原型的原型鏈繼承時又調用一遍父類構造函數。

優點：
可以繼承實例屬性/方法，也可以繼承原型屬性/方法
不存在引用屬性共享問題
可傳參
函數可復用

缺點：
調用了兩次父類構造函數，生成了兩份實例

原型式繼承

function createObj(o) {
    function F(){}
    F.prototype = o;
    return new F();
}

說明：
實際上是對原型鏈繼承的一個封裝，也是ES5 Object.create 的模擬實現，將傳入的對象作為創建的對象的原型。

特點：
父類新增原型方法/原型屬性，子類都能訪問到
簡單，易于實現

缺點：
包含引用類型的屬性值始終都會共享相應的值，這點跟原型鏈繼承一樣。

寄生式繼承

function createObj (o) {
    var clone = Object.create(o);
    clone.sayName = function () {
        console.log("hi");
    }
    return clone;
}

說明：
其實是對原型式繼承的第二次封裝，過程中對繼承的對象進行了拓展。

特點：
跟借用構造函數模式一樣，每次創建對象都會創建一遍方法。

缺點：

寄生組合式繼承

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

function prototype(child, parent) {
    var prototype = object(parent.prototype);
    prototype.constructor = child;
    child.prototype = prototype;
}

// 使用時
prototype(Child, Parent);

說明：
解決了組合繼承存在的問題

特點：
只調用了一次 Parent 構造函數，并且因此避免了在 Parent.prototype 上面創建不必要的、多余的屬性
原型鏈還能保持不變
還能夠正常使用 instanceof 和 isPrototypeOf

缺點：

參考資料

https://www.cnblogs.com/humin/p/4556820.html

https://github.com/mqyqingfeng/Blog/issues/16

https://segmentfault.com/a/1190000016708006

http://es6.ruanyifeng.com/#docs/class-extends

GPU云服務器云服務器繼承方式 php 類繼承方式 js繼承的幾種方式 javascript繼承

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

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

一名【合格】前端工程師的自檢清單

摘要：在他的重學前端課程中提到到現在為止，前端工程師已經成為研發體系中的重要崗位之一。大部分前端工程師的知識，其實都是來自于實踐和工作中零散的學習。一基礎前端工程師吃飯的家伙，深度廣度一樣都不能差。開篇前端開發是一個非常特殊的行業，它的歷史實際上不是很長，但是知識之繁雜，技術迭代速度之快是其他技術所不能比擬的。 winter在他的《重學前端》課程中提到：到現在為止，前端工程師已經成為研...

羅志環 2019-08-23 17:08 評論0 收藏0
一名【合格】前端工程師的自檢清單

摘要：在他的重學前端課程中提到到現在為止，前端工程師已經成為研發體系中的重要崗位之一。大部分前端工程師的知識，其實都是來自于實踐和工作中零散的學習。一基礎前端工程師吃飯的家伙，深度廣度一樣都不能差。開篇前端開發是一個非常特殊的行業，它的歷史實際上不是很長，但是知識之繁雜，技術迭代速度之快是其他技術所不能比擬的。 winter在他的《重學前端》課程中提到：到現在為止，前端工程師已經成為研發體系...

isaced 2019-05-21 19:50 評論0 收藏0
面試闖關1

摘要：面試闖關在面試過程中，總會被問到一些你用到過但是記不清一些零碎的知識，現在做一下總結。在兼容模式中，頁面以寬松的向后兼容的方式顯示模擬老式瀏覽器的行為以防止站點無法工作。作為對象原型鏈的終點。格式采用鍵值對，例如參考面試總結面試闖關1 在面試過程中，總會被問到一些你用到過、但是記不清一些零碎的知識，現在做一下總結。第一部分：HTML+CSS 1.常用那幾種瀏覽器測試？有哪些內核(L...

malakashi 2019-08-20 13:49 評論0 收藏0
面試闖關1

摘要：面試闖關在面試過程中，總會被問到一些你用到過但是記不清一些零碎的知識，現在做一下總結。在兼容模式中，頁面以寬松的向后兼容的方式顯示模擬老式瀏覽器的行為以防止站點無法工作。作為對象原型鏈的終點。格式采用鍵值對，例如參考面試總結面試闖關1 在面試過程中，總會被問到一些你用到過、但是記不清一些零碎的知識，現在做一下總結。第一部分：HTML+CSS 1.常用那幾種瀏覽器測試？有哪些內核(L...

cgspine 2019-08-30 15:52 評論0 收藏0
面試闖關1

摘要：面試闖關在面試過程中，總會被問到一些你用到過但是記不清一些零碎的知識，現在做一下總結。在兼容模式中，頁面以寬松的向后兼容的方式顯示模擬老式瀏覽器的行為以防止站點無法工作。作為對象原型鏈的終點。格式采用鍵值對，例如參考面試總結面試闖關1 在面試過程中，總會被問到一些你用到過、但是記不清一些零碎的知識，現在做一下總結。第一部分：HTML+CSS 1.常用那幾種瀏覽器測試？有哪些內核(L...

LucasTwilight 2019-08-01 16:14 評論0 收藏0