JavaScript中繼承的幾種實作方式

本篇文章將為你介紹JavaScript中繼承的幾種實作方式，希望看完這篇文章後，各位對JavaScript的繼承有一定的了解！

JavaScript中繼承的幾種實作方式

繼承

##想要實作繼承，首先就得有個父類別（建構子）來提供屬性和方法。

function Father(name){
    this.name=name   //父类构造函数中的属性
}
Father.prototype.age='40'   //父类原型中的属性

1、借用建構子繼承

var Son=function(){
    Father.call(this,...arguments)
    this.age=10
}
var son=new Son('小明')
console.log(son)   //{name: "小明", age: 10}

此時Son函式只是透過call方法在子層級建構子中呼叫父級建構子

也就是說只繼承了父類別建構子的屬性，沒有繼承父類別原型的屬性。

此時可以透過instanceof方法進行判斷

console.log(son instanceof Father) //false

2、透過原型鏈繼承

var Son=function(name){
    this.sonName=name
}
Son.prototype=new Father()
var xiaoming=new Son('小明')
console.log(xiaoming)    //{sonName:'小明'}
console.log(xiaoming.__proto__==Son.prototype)   //true
console.log(xiaoming.__proto__.__proto__==Father.prototype) //true
console.log(xiaoming.age)  //40  通过原型链查找

Son繼承了Father建構子中的name屬性以及原型中的age屬性，

Son的原型物件小明繼承了Son建構子中的sonName屬性、Father建構子中的name屬性以及原型中的age屬性，但只能傳值給Son，不能傳值給Father。

3、組合繼承（組合原型鏈繼承與借用建構子繼承）

var Son=function(){
    Father.call(this,...arguments)
}
Son.prototype=new Father()
var son=new Son('小明')
console.log(son)  //{name:'小明'}
console.log(son.age) //40

結合1、2兩種繼承方法，解決了無法繼承原型屬性、方法以及不能傳參的問題。其實子類別上會擁有父類別的兩個屬性，只是子類別的屬性覆寫了父類別的屬性（Father.call()，new Father()）

4、拷貝繼承

透過for…in，把父類別物件和原型物件上可枚舉的屬性和方法循環賦值到Son的原型上

function Son(name){
  var father=new Father()
  for(let i in father){
    console.log(father[i])
    Son.prototype[i]=father[i]
  }
  Son.prototype.name=name
}
var son=new Son('leo')
console.log(son)

這種方法無法取得父類不可列舉的方法，同時因為要拷貝父類別的屬性和方法，記憶體佔用量比較高，效率較低。

5、原型式繼承

採用原型式繼承並不需要定義一個類，傳入參數obj,產生一個繼承obj物件的物件。類似於複製一個對象，用函數包裝。但它不是類別繼承，而是原型式基礎，缺乏了類別的概念。

function ObjectCreate(obj){ //这个方法的原理就是Object.create()
  function F(){}
  F.prototype=obj
  return new F()
}
var Son=new Father('son');
var son=ObjectCreate(Son)
var objson=Object.create(Son);
console.log(son.name)   //son
console.log(objson.name)  //son
console.log(son.__proto__==Son)  //true

6、寄生式繼承

建立一個僅用於封裝繼承過程的函數，然後在內部以某種方式增強對象，最後返回物件

function ObjectCreate(obj){
  function F(){}
  F.prototype=obj
  return new F()
}
var Son=new Father();
function subObject(obj){
  var sub=ObjectCreate(obj)
  sub.name='son'
  return sub
}
var son=subObject(Son)
console.log(son.name)  //son

7、寄生組合式繼承

結合寄生式繼承和組合式繼承，完美實作不帶兩份超類別屬性的繼承方式，但太過繁雜，感覺不如組合式繼承。

function ObjectCreate(obj){
  function F(){}
  F.prototype=obj
  return new F()  
}
var middle=ObjectCreate(Father.prototype) //middle的原型继承了父类函数的原型
function Son(){
  Father.call(this,...arguments)
}
Son.prototype=middle; 
middle.construtor=Son;   //修复实例 
var son=new Son('son');
console.log(son)   //{name:'son'}

本文來自

js教學 欄目，歡迎學習！

以上是JavaScript中繼承的幾種實作方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！