JavaScript實現繼承的常用方式有哪些

這篇文章主要介紹了JavaScript實現繼承的常用方式有哪些的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇JavaScript實現繼承的常用方式有哪些文章都會有所收獲，下面我們一起來看看吧。

1.原型鏈繼承

讓一個構造函數的原型是另一個類型的實例，那么這個構造函數new出來的實例就具有該實例的屬性。

當試圖訪問一個對象的屬性時，它不僅僅在該對象上搜尋，還會搜尋該對象的原型，以及該對象的原型的原型，依次層層向上搜索，直到找到一個名字匹配的屬性或到達原型鏈的末尾。

function Parent() {
   this.isShow = true
   this.info = {
       name: "mjy",
       age: 18,
   };
}

Parent.prototype.getInfo = function() {
   console.log(this.info);
   console.log(this.isShow);
}

function Child() {};
Child.prototype = new Parent();

let Child1 = new Child();
Child1.info.gender = "男";
Child1.getInfo(); // {name: 'mjy', age: 18, gender: '男'} ture

let child2 = new Child();
child2.isShow = false
console.log(child2.info.gender) // 男
child2.getInfo(); // {name: 'mjy', age: 18, gender: '男'} false

優點：寫法方便簡潔，容易理解。

缺點：對象實例共享所有繼承的屬性和方法。傳教子類型實例的時候，不能傳遞參數，因為這個對象是一次性創建的（沒辦法定制化）。

2.借用構造函數繼承

function Parent(gender) {
  this.info = {
    name: "yhd",
    age: 19,
    gender: gender
  }
}

function Child(gender) {
    Parent.call(this, gender)
}

let child1 = new Child('男');
child1.info.nickname = 'xiaoma'
console.log(child1.info);

let child2 = new Child('女');
console.log(child2.info);

在子類型構造函數的內部調用父類型構造函數；使用 apply() 或 call() 方法將父對象的構造函數綁定在子對象上。

優點：解決了原型鏈實現繼承的不能傳參的問題和父類的原型共享的問題。

缺點：借用構造函數的缺點是方法都在構造函數中定義，因此無法實現函數復用。在父類型的原型中定義的方法，對子類型而言也是不可見的，結果所有類型都只能使用構造函數模式。

3.組合繼承（經典繼承）

將 原型鏈 和 借用構造函數 的組合到一塊。使用原型鏈實現對原型屬性和方法的繼承，而通過借用構造函數來實現對實例屬性的繼承。這樣，既通過在原型上定義方法實現了函數復用，又能夠保證每個實例都有自己的屬性

function Person(gender) {
  console.log('執行次數');
  this.info = {
    name: "mjy",
    age: 19,
    gender: gender
  }
}

Person.prototype.getInfo = function () {   // 使用原型鏈繼承原型上的屬性和方法
  console.log(this.info.name, this.info.age)
}

function Child(gender) {
  Person.call(this, gender) // 使用構造函數法傳遞參數
}

Child.prototype = new Person()

let child1 = new Child('男');
child1.info.nickname = 'xiaoma'
child1.getInfo()
console.log(child1.info);

let child2 = new Child('女');
console.log(child2.info);

優點就是解決了原型鏈繼承和借用構造函數繼承造成的影響。

缺點是無論在什么情況下，都會調用兩次超類型構造函數：一次是在創建子類型原型的時候，另一次是在子類型構造函數內部

4.原型式繼承

方法一：借用構造函數

在一個函數A內部創建一個臨時性的構造函數，然后將傳入的對象作為這個構造函數的原型，最后返回這個臨時類型的一個新實例。本質上，函數A是對傳入的對象執行了一次淺復制。

function createObject(obj) {
  function Fun() {}
  Fun.prototype = obj
  return new Fun()
}

let person = {
  name: 'mjy',
  age: 18,
  hoby: ['唱', '跳'],
  showName() {
    console.log('my name is:', this.name)
  }
}

let child1 = createObject(person)
child1.name = 'xxxy'
child1.hoby.push('rap')
let child2 = createObject(person)

console.log(child1)
console.log(child2)
console.log(person.hoby) // ['唱', '跳', 'rap']

方法二：Object.create()

Object.create() 是把現有對象的屬性，掛到新建對象的原型上，新建對象為空對象

ECMAScript 5通過增加Object.create()方法將原型式繼承的概念規范化了。這個方法接收兩個參數：作為新對象原型的對象，以及給新對象定義額外屬性的對象（第二個可選）。在只有一個參數時，Object.create()與這里的函數A方法效果相同。

let person = {
  name: 'mjy',
  age: 19,
  hoby: ['唱', '跳'],
  showName() {
    console.log('my name is: ', this.name)
  }
}

let child1 = Object.create(person)
child1.name = 'xxt'
child1.hoby.push('rap')
let child2 = Object.create(person)

console.log(child1)
console.log(child2)
console.log(person.hoby) // ['唱', '跳', 'rap']

優點是：不需要單獨創建構造函數。

缺點是：屬性中包含的引用值始終會在相關對象間共享，子類實例不能向父類傳參

5.寄生式繼承

寄生式繼承的思路與(寄生) `原型式繼承` 和 `工廠模式` 似, 即創建一個僅用于封裝繼承過程的函數,該函數在內部以某種方式來增強對象,最后再像真的是它做了所有工作一樣返回對象。

function objectCopy(obj) {
  function Fun() { };
  Fun.prototype = obj;
  return new Fun();
}

function createAnother(obj) {
  let clone = objectCopy(obj);
  clone.showName = function () {
    console.log('my name is：', this.name);
  };
  return clone;
}

let person = {
     name: "mjy",
     age: 18,
     hoby: ['唱', '跳']
}

let child1 = createAnother(person);
child1.hoby.push("rap");
console.log(child1.hoby); // ['唱', '跳', 'rap']
child1.showName(); // my name is： mjy

let child2 = createAnother(person);
console.log(child2.hoby); // ['唱', '跳', 'rap']

優點：寫法簡單，不需要單獨創建構造函數。

缺點：通過寄生式繼承給對象添加函數會導致函數難以重用。使用寄生式繼承來為對象添加函數, 會由于不能做到函數復用而降低效率;這一點與構造函數模式類似.

6.寄生組合式繼承

前面講過，組合繼承是常用的經典繼承模式，不過，組合繼承最大的問題就是無論什么情況下，都會調用兩次父類構造函數；一次是在創建子類型的時候，一次是在子類型的構造函數內部。寄生組合繼承就是為了降低父類構造函數的開銷而實現的。

通過借用構造函數來繼承屬性，通過原型鏈的混成形式來繼承方法。本質上，就是使用寄生式繼承來繼承超類型的原型，然后再將結果指定給子類型的原型。

function objectCopy(obj) {
  function Fun() { };
  Fun.prototype = obj;
  return new Fun();
}

function inheritPrototype(child, parent) {
  let prototype = objectCopy(parent.prototype);
  prototype.constructor = child;
  Child.prototype = prototype;
}

function Parent(name) {
  this.name = name;
  this.hoby = ['唱', '跳']
}

Parent.prototype.showName = function () {
  console.log('my name is：', this.name);
}

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

inheritPrototype(Child, Parent);
Child.prototype.showAge = function () {
  console.log('my age is：', this.age);
}

let child1 = new Child("mjy", 18);
child1.showAge(); // 18
child1.showName(); // mjy
child1.hoby.push("rap");
console.log(child1.hoby); // ['唱', '跳', 'rap']

let child2 = new Child("yl", 18);
child2.showAge(); // 18
child2.showName(); // yl
console.log(child2.hoby); // ['唱', '跳']

優點是：高效率只調用一次父構造函數，并且因此避免了在子原型上面創建不必要，多余的屬性。與此同時，原型鏈還能保持不變；

缺點是：代碼復雜

7.ES6、Class實現繼承

原理ES5 的繼承，實質是先創造子類的實例對象this，然后再將父類的方法添加到this上面（Parent.apply(this)）。 ES6 的繼承機制完全不同，實質是先將父類實例對象的屬性和方法，加到this上面（所以必須先調用super方法），然后再用子類的構造函數修改this

優點：語法簡單易懂,操作更方便。

缺點：并不是所有的瀏覽器都支持class關鍵字 lass Per

關于“JavaScript實現繼承的常用方式有哪些”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“JavaScript實現繼承的常用方式有哪些”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。