1. 程式人生 > 實用技巧 >簡單易懂的JS繼承圖解

簡單易懂的JS繼承圖解

JS繼承的實現方式一共有八種。下面我們來一個一個瞅一下。注意⚠️:文章依據個人理解,難免有問題,還望各位及時指出!!!!!

  • 原型鏈繼承
  • 借用建構函式繼承
  • 組合繼承
  • 原型式繼承
  • 寄生繼承
  • 寄生組合式繼承
  • 原型拷貝和建構函式實現繼承
  • Class繼承
  • 混入方式繼承多個物件

我們先建立一個父類

  // 父類
  function Animal(name, color){
      this.name = name;
      this.attribute = {
          color: color,
      }
      this.action = function (currentAction) {
          console.log(this.name + currentAction)
      }
  }

原型鏈繼承

實現

原理:將父類的例項作為子類的原型

    function OrangeCat(){};
    OrangeCat.prototype = new Animal('橘貓','橘色