JavaScript中常見的幾種繼承方式

更新時(shí)間：2022年06月24日 08:50:31 作者：??遠(yuǎn)方的小草????

這篇文章主要介紹了JavaScript中常見的幾種繼承方式，繼承可以訪問(wèn)父類原型上的方法或?qū)傩?，?shí)現(xiàn)了方法復(fù)用，但是創(chuàng)建子類實(shí)例時(shí)，不能傳父類的參數(shù)，子類實(shí)例共享了父類構(gòu)造函數(shù)的屬性值

原型繼承

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

內(nèi)存圖

分析

原型繼承的原理就是把子類的prototype指向父類的實(shí)例身上，這樣做，子類就可以使用父類的屬性和方法了，但是，無(wú)法初始化父類的屬性，這個(gè)時(shí)候，盜用構(gòu)造函數(shù)繼承就出現(xiàn)了

盜用構(gòu)造函數(shù)繼承

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'))

分析

盜用構(gòu)造函數(shù)的原理簡(jiǎn)單理解就是吧父類函數(shù)的代碼 copy 到子類里面，在上述代碼中相當(dāng)于把父類的this.name = name 在子類里執(zhí)行了一次，這樣的話，就可以在子類實(shí)例化的時(shí)候初始化父類的一些屬性

如果這樣的話就取不到父類原型身上的方法了，為了解決這個(gè)問(wèn)題，組合繼承就出現(xiàn)了

組合繼承

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

組合繼承，也稱為偽經(jīng)典繼承，結(jié)合了原型繼承和盜用構(gòu)造函數(shù)繼承，既可以初始化父類的方法，又可以取到父類的原型身上的方法

可以看到這種繼承方式name會(huì)被多次創(chuàng)建，雖然在使用上沒(méi)什么區(qū)別，但是會(huì)多開辟一些無(wú)用內(nèi)存，而且還會(huì)多調(diào)用一次函數(shù)

原型鏈繼承

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

這種繼承適用于想在一個(gè)對(duì)象的基礎(chǔ)上添加一個(gè)新的對(duì)象，這個(gè)新的對(duì)象可以有自己獨(dú)立的屬性

還可以有自己的屬性：

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)

寄生式繼承就是類似于工廠模式，經(jīng)過(guò)它創(chuàng)建的函數(shù)，會(huì)有一些自帶的值

寄生組合式繼承

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); // 創(chuàng)建目標(biāo)對(duì)象的原型對(duì)象
  // 可以理解為復(fù)制父類對(duì)象prototype的屬性，這樣做可以少調(diào)用一次父類的實(shí)例化操作
  res.constructor = Son // 將構(gòu)造函數(shù)指向son
  Son.prototype = res //將子類的prototype 指向父類創(chuàng)建的原型對(duì)象，這樣子類既可以使用父類的方法，又不用實(shí)例化父類
}
inhertPrototype(Son, Parent)
console.log(new Son('jack'))

寄生組合式繼承被稱為最佳繼承模式他解決了組合繼承父類函數(shù)被調(diào)用兩次的問(wèn)題，同時(shí)又不會(huì)給子類的prototype 加上父類的無(wú)用的屬性