JavaScript中常見的幾種繼承方式

2022-06-24 10:00:47

原型繼承

function Parent(name) {
  this.name = name
}
Parent.prototype.getName = function(){
  return 'parentPrototype' + ' ' + this.name;
}
function Son() {
}
Son.prototype = new Parent();
console.log(new Son())

記憶體圖

分析

原型繼承的原理就是把子類的prototype指向父類別的範例身上，這樣做，子類就可以使用父類別的屬性和方法了，但是，無法初始化父類別的屬性，這個時候，盜用建構函式繼承就出現了

盜用建構函式繼承

function Parent(name) {
  this.name = name
}
Parent.prototype.getName = function(){
  return 'parentPrototype' + ' ' + this.name;
}
function Son(name) {
  Parent.call(this, name)
}

console.log(new Son('jack'))

分析

盜用建構函式的原理簡單理解就是吧父類別函數的程式碼 copy 到子類裡面，在上述程式碼中相當於把父類別的this.name = name 在子類裡執行了一次，這樣的話，就可以在子類範例化的時候初始化父類別的一些屬性

如果這樣的話就取不到父類別原型身上的方法了，為了解決這個問題，組合繼承就出現了

組合繼承

function Parent(name) {
  this.name = name
}
Parent.prototype.getName = function(){
  return 'parentPrototype' + ' ' + this.name;
}
function Son(name) {
  Parent.call(this, name) // 第二次呼叫
}
Son.prototype = new Parent() // 第一次呼叫
console.log(new Son('jack'))

組合繼承，也稱為偽經典繼承，結合了原型繼承和盜用建構函式繼承，既可以初始化父類別的方法，又可以取到父類別的原型身上的方法

可以看到這種繼承方式name會被多次建立，雖然在使用上沒什麼區別，但是會多開闢一些無用記憶體，而且還會多呼叫一次函數

原型鏈繼承

const parent = {
  name: 'jack',
  getName() {
    return this.name
  }
}
const son = Object.create(parent)
console.log(son)

這種繼承適用於想在一個物件的基礎上新增一個新的物件，這個新的物件可以有自己獨立的屬性

還可以有自己的屬性：

const parent = {
  name: 'jack',
  getName() {
    return this.name
  }
}
const son = Object.create(parent, {
  age: {
    value: 18,
    enumerable: true,
    writable: true,
    configurable: true
  }
})
console.log(son)

寄生式繼承

const parent = {
  name: 'jack',
  getName() {
    return this.name
  }
}
function createObj(origin){
  const res = Object(origin);
  res.age = 18;
  res.getAge = function() {
    return this.age
  };
  return res
}
const son = createObj(parent)
console.log(son)

寄生式繼承就是類似於工廠模式，經過它建立的函數，會有一些自帶的值

寄生組合式繼承

function Parent(name) {
  this.name = name;
}
Parent.prototype.getName = function () {
  return this.name;
}
function Son(name) {
  Parent.call(this, name)
};
function inhertPrototype(Son, Parent) {
  const res = Object(Parent.prototype); // 建立目標物件的原型物件
  // 可以理解為複製父類別物件prototype的屬性，這樣做可以少呼叫一次父類別的範例化操作
  res.constructor = Son // 將建構函式指向son
  Son.prototype = res //將子類的prototype 指向父類別建立的原型物件，這樣子類既可以使用父類別的方法，又不用範例化父類別
}
inhertPrototype(Son, Parent)
console.log(new Son('jack'))

寄生組合式繼承被稱為最佳繼承模式他解決了組合繼承父類別函數被呼叫兩次的問題，同時又不會給子類的prototype 加上父類別的無用的屬性