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

創(chuàng)新互聯(lián)專注于洛寧企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),成都做商城網(wǎng)站。洛寧網(wǎng)站建設(shè)公司,為洛寧等地區(qū)提供建站服務(wù)。全流程按需求定制網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

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

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

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

我們先回顧用函數(shù)實(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和定義在原型對(duì)象上的函數(shù)hello()（注意沒有function關(guān)鍵字），這樣就避免了Student.prototype.hello = function () {...}這樣分散的代碼。

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

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

class繼承

用class定義對(duì)象的另一個(gè)巨大的好處是繼承更方便了。想一想我們從Student派生一個(gè)PrimaryStudent需要編寫的代碼量。現(xiàn)在，原型繼承的中間對(duì)象，原型對(duì)象的構(gòu)造函數(shù)等等都不需要考慮了，直接通過extends來實(shí)現(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)鍵字實(shí)現(xiàn)的，而extends則表示原型鏈對(duì)象來自Student。子類的構(gòu)造函數(shù)可能會(huì)與父類不太相同，例如，PrimaryStudent需要name和grade兩個(gè)參數(shù)，并且需要通過super(name)來調(diào)用父類的構(gòu)造函數(shù)，否則父類的name屬性無法正常初始化。

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

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

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

現(xiàn)在用還早了點(diǎn)，因?yàn)椴皇撬械闹髁鳛g覽器都支持ES6的class。如果一定要現(xiàn)在就用上，就需要一個(gè)工具把class代碼轉(zhuǎn)換為傳統(tǒng)的prototype代碼，可以試試Babel這個(gè)工具。

到此，相信大家對(duì)“JavaScript中class繼承的知識(shí)點(diǎn)整理”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！