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

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

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

class繼承

用class定義對象的另一個(gè)巨大的好處是繼承更方便了。想一想我們從Student派生一個(gè)PrimaryStudent需要編寫的代碼量。現(xiàn)在，原型繼承的中間對象，原型對象的構(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則表示原型鏈對象來自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è)工具。

練習(xí)

請利用class重新定義Cat，并讓它從已有的Animal繼承，然后新增一個(gè)方法say()，返回字符串 'Hello, xxx!' 。

最新評論