JavaScript繼承的幾種方式

SegmentFault 發布于2019-08-22 18:02 / 1667人閱讀

摘要：組合方式繼承終極版工商建設開心能分清是孩子還是父輩二狗的構造函數已指向圖示關鍵代碼創建對象的方法就是用原型鏈來連接的。也讓二狗有了確定的歸屬。

一、繼承原理

原型鏈
不知道什么是原型鏈？
來讀幾個關鍵詞：

哥歐 構 構造函數 構造函數 構造函數  
實例 實例 實例  
原型對象 原型對象 原型對象
prototype prototype prototype
__proto__ __proto__ __proto__
constructor constructor constructor
instanceof instanceof instanceof

實現instanceof

function newInstanceof (left, right) {
  let leftProto = left.__proto__;
  let rightPrototype = right.prototype
  while(true) {
    if(leftProto === rightPrototype) {
      return true;
    } else if (leftProto === null) {
      return false;
    } else {
      leftProto = leftProto.__proto__
    }
  }
}

二、繼承方法 1、構造函數

  function FatherA() {
    this.money = 100000;
  }

  function ChildA() {
    FatherA.call(this);
    this.soliloquy = "開心";
  }
  var childAng = new ChildA();
  FatherA.prototype.makeMoneyWay = function () {
    console.log("next lottery number is ……");
  }

假設某地有個習俗，FatherA會給ChildA準備10萬教育基金，
構造函數繼承可以完美的讓孩子獲取到準備好的教育基金。
然而這個時候FatherA新領悟到了一串神秘代碼，childAng卻用不了

childAng.makeMoneyWay(); // 會報錯

這樣的繼承感覺不是親身的。

2、原型鏈繼承

  function FatherB() {
    this.money = 100000;
    this.card = ["工商", "建設"];
  }

  function ChildB() {
    this.soliloquy = "開心";
  }
  ChildB.prototype = new FatherB()
  var childBobo = new ChildB();
  var childBigShuan = new ChildB();
  FatherB.prototype.makeMoneyWay = function () {
    console.log("next lottery number is ……");
  }
  childBobo.card.push("招商"); // 引用類型受影響
  childBobo.money += 1000; // 值類型在此不受影響

原型鏈繼承解決了構造函數的問題，FatherB上新的技能，ChildB的實例也能很好的使用。
圖示：

然而一個新問題就是，當實例有多個例如childBobo(波波)和childBigSuan(大栓)。
波波這個時候新辦了一張銀行卡，結果大栓立馬能用，這樣讓波波覺得很沒有隱私，哦不，是很不公平，憑啥你刷我的卡。

3、組合方式繼承

  function FatherC() {
    this.money = 100000;
    this.card = ["工商", "建設"];
  }

  function ChildC() {
    FatherC.call(this);
    this.soliloquy = "開心";
  }
  ChildC.prototype = new FatherC()
  var childCuifa = new ChildC();
  var childChizi = new ChildC();
  FatherC.prototype.makeMoneyWay = function () {
    console.log("next lottery number is ……");
  }
  childCuifa.card.push("招商");
  childCuifa.money += 1000;

出了問題總要解決，這時候出現了由構造函數和原型鏈的組合繼承，這樣既讓ChildC實例的數據相互獨立，也讓ChildC能獲取到FatherC的新技能。
社會問題是解決了。新的問題就是性能問題，這類繼承會調用FatherC兩次。顯然用的越多，消耗的資源越多。(雖然現在硬件很發達，但是1個人睡100平米的床終究還是不方面，起夜還沒下床呢就尿了)

4、組合方式繼承進階版

  function FatherD() {
    this.money = 100000;
    this.card = ["工商", "建設"];
  }

  function ChildD() {
    FatherD.call(this);
    this.soliloquy = "開心";
  }
  ChildD.prototype = FatherD.prototype
  var childDazhu = new ChildD();
  var childDabing = new ChildD();
  console.log("分不清是孩子還是父輩", childDazhu instanceof ChildD, childDazhu instanceof FatherD);
  console.log("大柱的構造函數指向的是ParentD", childDazhu.constructor);

上一個組合繼承中

      ChildC.prototype = new FatherC()

這行代碼主要是為了讓ChildC.prototype與new FatherC()的__proto__在一條原型鏈上。
所以換個思路，new FatherC()的__proto__也就是FatherC.protorype。
圖示：

替換后，既不會再執行FatherC，也讓原型鏈合并到了一起。
這個方案的隱藏問題就是，childDazhu(大柱)這個實例，會讓人不知道是孩子還是爸爸。

5、組合方式繼承終極版

  function FatherE() {
    this.money = 100000;
    this.card = ["工商", "建設"];
  }

  function ChildE() {
    FatherE.call(this);
    this.soliloquy = "開心";
  }
  ChildE.prototype = Object.create(FatherE.prototype);
  ChildE.prototype.constructor = ChildE;
  var childErgo = new ChildE();
  var childErwa = new ChildE();
  var fatherErjun = new FatherE();
  console.log("能分清是孩子還是父輩", childErgo instanceof ChildE, childErgo instanceof FatherE);
  console.log("二狗的構造函數已指向childE", childErgo.constructor);

圖示：

關鍵代碼

Object.create

Object.create創建對象的方法就是用原型鏈來連接的。
Object.create()方法創建一個新對象，使用現有的對象來提供新創建的對象的__proto__。
參考自：
https://developer.mozilla.org...
var a = {name:"a"};
var b = Object.create(a);
b.__proto__ === a; // true
這樣ChildE與FatherE.prototype就在一條鏈上面了，并且數據也進行了隔離，此時修改ChildE原型對象的構造函數指向，不會影響到FatherE的原型對象。
也讓childErgo(二狗)有了確定的歸屬。
幸福的結局！！

GPU云服務器云服務器 js繼承的幾種方式服務器請求的幾種方式 java創建對象的幾種方式最基本的幾種

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

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

JavaScript中常見的幾種繼承方式

摘要：繼承方式一混入繼承繼承方式二原型繼承創建構造函數，并且將對象的地址賦值給構造函數的原型實現繼承恢復三角關系實例化的所有對象都擁有對象的屬性和方法繼承方式三混入加原型繼承方式四實現過程了一個新的對象，把傳入作為參數的那個對象設置給新創建的這個繼承方式一：混入繼承 use strict; //object:A let Oa= { money: many money, r...

Vicky 2019-08-21 17:36 評論0 收藏0
javascript 面向對象(實現繼承的幾種方式)

摘要：老明調用了從原型中繼承來的方法繼承到了當前對象的原型中調用了從原型中擴展來的方法構造繼承基本思想借用構造函數的基本思想就是利用或者把父類中通過指定的屬性和方法復制借用到子類創建的實例中。 1、原型鏈繼承核心：將父類的實例作為子類的原型缺點：父類新增原型方法/原型屬性，子類都能訪問到，父類一變其它的都變了 function Person (name) { ...

liujs 2019-08-23 16:41 評論0 收藏0
javascript實現繼承的幾種主要方法

摘要：原型鏈繼承核心代碼核心代碼優點簡單容易實現缺點多拷貝了一份的屬性過來并且的方法每生成一個新的就要再重新拷貝一份造成了不必要的浪費構造函數繼承優點簡單容易實現可以同時繼承多個父對象三姓家奴缺點只能繼承定義在父元素上的屬性或方法而對于父元素原型 //1.原型鏈繼承 var supClass = function(name, sex) { ...

chnmagnus 2019-08-23 15:18 評論0 收藏0
js實現繼承的幾種方法

摘要：實現繼承的方法借用構造函數解決原型中包含引用類型所帶來的問題的過程中，使用借用構造函數偽造對象或經典繼承來實現繼承。繼承在ECMAScript中繼承主要是依靠原型鏈來實現的。實現繼承的方法利用原型讓一個引用類型繼承另一個引用類型的屬性和方法什么是原型鏈先要了解構造函數、原型、和實例的關系：每一個構造函數都有一個原型對象，原型對象都包含一個指向構造函數的指針，實例都包含...

pkhope 2019-08-26 11:00 評論0 收藏0
理解原型鏈和原型繼承

摘要：原型鏈和構造函數是一種面向對象的語言，并且可以進行原型繼承。來了極大的支持了工程化，它的標準讓瀏覽器內部實現類和類的繼承構造函數構造函數調用父類構造函數現在瀏覽器對其支持程度還不高。原型鏈原型鏈比作用域鏈要好理解的多。 JavaScript中的每個對象，都有一個內置的_proto_屬性。這個屬性是編程不可見的（雖然ES6標準中開放了這個屬性，然而瀏覽器對這個屬性的可見性的支持不同）...

XboxYan 2019-08-22 10:34 評論0 收藏0