js繼承種類

 

• 原型鏈繼承

繼承首先要有父類 ，創建一個父類

function Animal(name){

 this.name=name||"Animal"

 this.sleep=function(){

    console.log(this.name+"睡覺")

}

 

}

Animal.prototype.eat=function(foot){

console.log(this.name+"吃東西"+foot)

}

// 狗狗類

function Dog(){

this.size

 

}

Dog.prototype=new Animal();

Dog.prototype.constructor = Dog;

//小豬類

 

function Pig(){

}

Pig.prototype=new Animal();

// 一頭豬

var pigone=new Pig()

// 一隻狗，

var dogone=new Dog()

dogone.prototype.name="花花"

pigone.prototype.name="豬豬" //錯誤的，無法向構造函數傳參數

 

dogone.eat("骨頭")

dogone.sleep()

pigone.eat("飼料")

pigone.sleep()

 

 

console.log(dogone instanceof Animal)

console.log(dogone instanceof Dog)

 

特點：

1. 非常純粹的繼承關係，實例是子類的實例，也是父類的實例
2. 父類新增原型方法/原型屬性，子類都能訪問到
3. 簡單，易於實現
4. 在父類新增的方法和屬性，在任何一個子類事列中都可以訪問，每個子類只能訪問自己子類的方法和屬性，不能訪問
5.  

缺點：

 

1.創建子類實例時，無法向父類構造函數傳參

2. 來自原型對象的所有屬性被所有實例共享 （ 父類中私有的和公有的都繼承到了子類原型上(）

 

• call繼承(構造繼承)

function Animal(name){

 this.name=name||"Animal"

 this.sleep=function(){

    console.log(this.name+"睡覺")

}

 

}

Animal.prototype.eat=function(foot){

console.log(this.name+"吃東西"+foot)

}

function Dog(name){

    Animal.call(this)

    this.name = name

}

var dogone=new Dog('花花')

dogone.sleep()

dogone.eat("骨頭") //這個在原型鏈上面，無法繼承。繼承的是父類中的this指示下的屬性和方法

特點：

1. 解決了1中，子類實例共享父類引用屬性的問題
2. 創建子類實例時，可以向父類傳遞參數
3. 可以實現多繼承（call多個父類對象）

缺點：

1. 實例並不是父類的實例，只是子類的實例
2. 只能繼承父類的實例屬性和方法，不能繼承原型屬性/方法
3. 無法實現函數複用，每個子類都有父類實例函數的副本，影響性能

• 3.拷貝繼承

核心：使用父類的構造函數來增強子類實例

特點：把父類私有的和公有的克隆一份一樣的給子類

function Animal(name){

 this.name=name||"Animal"

 this.sleep=function(){

    console.log(this.name+"睡覺")

}

 

}

Animal.prototype.eat=function(foot){

console.log(this.name+"吃東西"+foot)

}

function Dog(name){

    var temp = new Animal(name)

    for(var k in temp){

        this[k] = temp[k]

    }

    Dog.prototype.name = name || '狗狗';

}

var dogone=new Dog('花花')

dogone.sleep()

dogone.eat("骨頭") //

var pig=new Dog('等待')

pig.sleep()

pig.eat("骨頭") 

缺點：

1. 效率較低，內存佔用高（因爲要拷貝父類的屬性）
2. 無法獲取父類不可枚舉的方法（不可枚舉方法，不能使用for in 訪問到）

• 原型鏈+call構造繼承
• function Animal(name){

   this.name=name||"Animal"

   this.sleep=function(){

      console.log(this.name+"睡覺")

  }

   

  }

  Animal.prototype.eat=function(foot){

  console.log(this.name+"吃東西"+foot)

  }

  function Dog(name){

      Animal.call(this)

      this.name=name||'狗狗'

  }

  Dog.prototype=new Animal()  

  Dog.prototype.constructor = Dog;

  var dogone=new Dog('花花')

  dogone.sleep()

  dogone.eat("骨頭") 

  var pig=new Dog('等待')

  pig.sleep()

  pig.eat("骨頭") 

  console.log(dogone.name)

  特點：

  1. 彌補了方式2的缺陷，可以繼承實例屬性/方法，也可以繼承原型屬性/方法
  2. 既是子類的實例，也是父類的實例
  3. 不存在引用屬性共享問題
  4. 可傳參
  5. 函數可複用

  缺點：

  1. 調用了兩次父類構造函數，生成了兩份實例（子類實例將子類原型上的那份屏蔽了）

  寄生組合繼承
• function Animal(name){
   this.name=name||"Animal"
   this.sleep=function(){
      console.log(this.name+"睡覺")
  }
   
  }
  Animal.prototype.eat=function(foot){
  console.log(this.name+"吃東西"+foot)
  }
  function Dog(name){
      Animal.call(this)
      this.name=name||'狗狗'
  }
  Dog.prototype = createObject(Animal.prototype)
  Dog.prototype.constructor = Dog;
  function createObject(o){
      function fn(){}
      fn.prototype = o;
      return new fn;
  }
  var dogone=new Dog('花花')
  dogone.sleep()
  dogone.eat("骨頭") 
  var pig=new Dog('等待')
  pig.sleep()
  pig.eat("骨頭") 
  console.log(dogone.name)