JavaScript中class繼承的知識點整理

本篇內(nèi)容主要講解“JavaScript中class繼承的知識點整理”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JavaScript中class繼承的知識點整理”吧!

JavaScript的對象模型是基于原型實現(xiàn)的，特點是簡單，缺點是理解起來比傳統(tǒng)的類－實例模型要困難，最大的缺點是繼承的實現(xiàn)需要編寫大量代碼，并且需要正確實現(xiàn)原型鏈。

有沒有更簡單的寫法？有！

新的關(guān)鍵字class從ES6開始正式被引入到JavaScript中。class的目的就是讓定義類更簡單。

我們先回顧用函數(shù)實現(xiàn)Student的方法：

function Student(name) {
  this.name = name;
}

Student.prototype.hello = function () {
  alert('Hello, ' + this.name + '!');
}

如果用新的class關(guān)鍵字來編寫Student，可以這樣寫：

class Student {
  constructor(name) {
    this.name = name;
  }

  hello() {
    alert('Hello, ' + this.name + '!');
  }
}

比較一下就可以發(fā)現(xiàn)，class的定義包含了構(gòu)造函數(shù)constructor和定義在原型對象上的函數(shù)hello()（注意沒有function關(guān)鍵字），這樣就避免了Student.prototype.hello = function () {...}這樣分散的代碼。

最后，創(chuàng)建一個Student對象代碼和前面章節(jié)完全一樣：

var xiaoming = new Student('小明');
xiaoming.hello();

class繼承

用class定義對象的另一個巨大的好處是繼承更方便了。想一想我們從Student派生一個PrimaryStudent需要編寫的代碼量?，F(xiàn)在，原型繼承的中間對象，原型對象的構(gòu)造函數(shù)等等都不需要考慮了，直接通過extends來實現(xiàn)：

class PrimaryStudent extends Student {
  constructor(name, grade) {
    super(name); // 記得用super調(diào)用父類的構(gòu)造方法!
    this.grade = grade;
  }

  myGrade() {
    alert('I am at grade ' + this.grade);
  }
}

注意PrimaryStudent的定義也是class關(guān)鍵字實現(xiàn)的，而extends則表示原型鏈對象來自Student。子類的構(gòu)造函數(shù)可能會與父類不太相同，例如，PrimaryStudent需要name和grade兩個參數(shù)，并且需要通過super(name)來調(diào)用父類的構(gòu)造函數(shù)，否則父類的name屬性無法正常初始化。

PrimaryStudent已經(jīng)自動獲得了父類Student的hello方法，我們又在子類中定義了新的myGrade方法。

ES6引入的class和原有的JavaScript原型繼承有什么區(qū)別呢？實際上它們沒有任何區(qū)別，class的作用就是讓JavaScript引擎去實現(xiàn)原來需要我們自己編寫的原型鏈代碼。簡而言之，用class的好處就是極大地簡化了原型鏈代碼。

你一定會問，class這么好用，能不能現(xiàn)在就用上？

現(xiàn)在用還早了點，因為不是所有的主流瀏覽器都支持ES6的class。如果一定要現(xiàn)在就用上，就需要一個工具把class代碼轉(zhuǎn)換為傳統(tǒng)的prototype代碼，可以試試Babel這個工具。

到此，相信大家對“JavaScript中class繼承的知識點整理”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！