[原創] JavaScript中的繼承總結

sixgo 發布于2019-08-21 10:48 / 3067人閱讀

摘要：中繼承比較復雜，坑比較多，最近有點時間整理下，記錄下來。的繼承實現方式大概分類如下的兩大類，每一種實現都有自己的有點和缺點，根據場景選擇吧通過修改原型鏈來來實現繼承通過復制父類來來實現繼承為了理解繼承的原型鏈的變化，我畫了原型鏈圖。

JS 中繼承比較復雜，坑比較多，最近有點時間整理下，記錄下來。

JS 的繼承實現方式大概分類如下的兩大類，每一種實現都有自己的有點和缺點，根據場景選擇吧

通過修改原型鏈來來實現繼承

通過復制父類來來實現繼承

為了理解繼承的原型鏈的變化，我畫了原型鏈圖。下圖是沒有繼承的時候，父類和子類的原型鏈圖

function Parent(name, age) {
    this.name = name;
    this.age = age;
}
Parent.prototype.getName = function () {
    return this.name;
};
Parent.prototype.getAge = function () {
    return this.age;
};
Parent.prototype.love = {
    game: ["DoTa"]
};

Parent.pay = function(){
  return 1000;
};

function Son(){}

修改原型鏈來來實現繼承

修改原型鏈也有好幾種，現在分開來說：

第一種

實現原理：修改原型鏈(子類的原型指向父類的原型)實現繼承

優點：簡單

缺點：子類修改影響父類

原型鏈圖注意里面的紅線

不調用構造方法實現

function Son(){}
Son.prototype = new Parent();
Son.prototype.constructor = Son;

調用構造方法實現

function Son(){
    Parent.apply(this, arguments)
}
Son.prototype = Parent.prototype;
Son.prototype.constructor = Son;

詳細代碼實現：https://github.com/xuanxiao2013/f2e-practice/blob/master/javascript-inherit/inherit1.js

第二種

實現原理：修改原型鏈(通過加入臨時函數，阻止子類修改父類)實現繼承

優點：子類即能繼承父類，又基本不影響父類，達到真正意義上的繼承

缺點：實例的對象和父類原型的對象相同的時候(父類的love)，可能會出現子類修改父類對象原型中的所有屬性被實例共享，共享很適合函數，對基本值的屬性也可以（實例上添加同名屬性），但是對引用類型的值的屬性來說，就會有問題

原型鏈圖注意里面的紅線

ES3 實現方式詳細代碼實現:

function create(proto){
    var F = function(){};
    F.prototype = proto;
    return new F();
}

function Son(){
    Parent.apply(this, arguments);
}
Son.prototype = create(Parent.prototype);
Son.prototype.constructor = Son;

ES5 實現方式詳細代碼實現:

function Son(){
    Parent.apply(this, arguments);
 }
 Son.prototype = Object.create(Parent.prototype)
 Son.prototype.constructor = Son;

ES6 實現方式詳細代碼實現:

class Parent{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
}
Parent.prototype.getName = function () {
    return this.name;
};
Parent.prototype.getAge = function () {
    return this.age;
};
Parent.prototype.love = {
    game: ["DoTa"]
};

class Son extends Parent {
    constructor(...args){
        super(...args);
    }
}

都說ES6 的Class 只是個語法糖，看來原因在這了

測試：

var parent = new Parent("jack", 40);
log("parentName:" + parent.getName()); // parentName:jack
var son = new Son("tom", 20);
Son.prototype.getName = function(){
    return this.name + " has good father";
};
log("sonName:" + son.getName()); // sonName:tom has good father
log("parentName:" + parent.getName()); // parentName:jack


log(Son.prototype.constructor === Son); // true
log(son instanceof Son); // true
log(son instanceof Parent); // true
log(son instanceof Object); // true


log("parent love:" + parent.love.game); // parent love:DoTa
log("son love:" + son.love.game); // son love:DoTa

log("------------------------");

// 注意這里
son.love.game = "DoTa2";
log("parent love:" + parent.love.game); // parent love:DoTa2
log("son love:" + son.love.game); // son love:DoTa2

log("------------------------");
son.love = {
    game: "DoTa3"
};
// 注意這里
log("parent love:" + parent.love.game); // parent love:DoTa2
log("son love:" + son.love.game); // son love:DoTa3

復制父類來來實現繼承

實現原理：通過深度復制把父類的方法復制一份給子類來實現繼承

優點：子類即能繼承父類，又不影響父類，達到真正意義上的繼承

缺點：復雜

詳細代碼實現：https://github.com/xuanxiao2013/f2e-practice/blob/master/javascript-inherit/inherit3.js

GPU云服務器云服務器 java中的繼承 javascript學習總結 javascript繼承 vps日常維護中的一些要點總結

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

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

原理解釋 - 收藏集 - 掘金

摘要：巧前端基礎進階全方位解讀前端掘金我們在學習的過程中，由于對一些概念理解得不是很清楚，但是又想要通過一些方式把它記下來，于是就很容易草率的給這些概念定下一些方便自己記憶的有偏差的結論。計算機程序的思維邏輯 (83) - 并發總結 - 掘金從65節到82節，我們用了18篇文章討論并發，本節進行簡要總結。多線程開發有兩個核心問題，一個是競爭，另一個是協作。競爭會出現線程安全問題，所以，本...

AlphaGooo 2019-08-21 11:41 評論0 收藏0
原理解釋 - 收藏集 - 掘金

摘要：巧前端基礎進階全方位解讀前端掘金我們在學習的過程中，由于對一些概念理解得不是很清楚，但是又想要通過一些方式把它記下來，于是就很容易草率的給這些概念定下一些方便自己記憶的有偏差的結論。計算機程序的思維邏輯 (83) - 并發總結 - 掘金從65節到82節，我們用了18篇文章討論并發，本節進行簡要總結。多線程開發有兩個核心問題，一個是競爭，另一個是協作。競爭會出現線程安全問題，所以，本...

forrest23 2019-08-16 10:36 評論0 收藏0
傻傻分不清的__proto__與prototype

摘要：今天同事小英童鞋問了我一個問題小英童鞋認為的原型對象是，所以會繼承的屬性，調用相當于調用，但結果不是一個方法。構造函數創建對象實例函數有兩個不同的內部方法和。如果不通過關鍵字調用函數，則執行函數，從而直接執行代碼中的函數體。今天同事小英童鞋問了我一個問題： function Foo(firstName, lastName){ this.firstName = firstNam...

YancyYe 2019-08-22 11:14 評論0 收藏0
基礎知識 - 收藏集 - 掘金

摘要：本文是面向前端小白的，大手子可以跳過，寫的不好之處多多分鐘搞定常用基礎知識前端掘金基礎智商劃重點在實際開發中，已經非常普及了。 JavaScript字符串所有API全解密 - 掘金關于我的博客：louis blog SF專欄：路易斯前端深度課原文鏈接：JavaScript字符串所有API全解密本文近 6k 字，讀完需 10 分鐘。字符串作為基本的信息交流的橋梁，幾乎被所有的編程...

wdzgege 2019-08-20 17:47 評論0 收藏0
深入理解JavaScript系列8:S.O.L.I.D五大原則之里氏替換原則

摘要：前言本章我們要講解的是五大原則語言實現的第篇，里氏替換原則。因此，違反了里氏替換原則。與行為有關，而不是繼承到現在，我們討論了和繼承上下文在內的里氏替換原則，指示出的面向對象。前言本章我們要講解的是S.O.L.I.D五大原則JavaScript語言實現的第3篇，里氏替換原則LSP（The Liskov Substitution Principle ）。英文原文：http://fre...

susheng 2019-08-19 17:21 評論0 收藏0