ES6深刻淺出 Classes

一步，一步前進の一步

ES6深刻淺出之Classes。翻譯的同時亂加我的看法，強烈推薦閱讀原做者的文章，言簡意賅。es6-classes-in-depth

類語法本質

JS 是基於原型的語言，那麼ES6裏的classes是什麼東西？classes 是原型繼承的語法糖------主要是用來勾引不太理解 JS 原型鏈語法的其餘語言使用者。ES6有好多新的特性本質上就是語法糖，classes也不例外。我會向你證實 classes 是語法糖，由於classes 的語法很容易使用 ES5的語法實現出來，classes 並非JS 語法的一個變革，它存在的目的僅僅是使原型繼承變得簡單。

ES5和 ES6的類實現對比

那麼，我假設你已經很好的理解了原型繼承的原理,畢竟你已經在閱讀ES6這麼高級的東西了。下面代碼定義車的類，可被實例化,加油,移動。

function Car () {
  this.fuel = 0;
  this.distance = 0;
}

Car.prototype.move = function () {
  if (this.fuel < 1) {
    throw new RangeError('Fuel tank is depleted')
  }
  this.fuel--
  this.distance += 2
}

Car.prototype.addFuel = function () {
  if (this.fuel >= 60) {
    throw new RangeError('Fuel tank is full')
  }
  this.fuel++
}

使用下面的代碼使車跑起來吧：

var car = new Car()
car.addFuel()
car.move()
car.move()
// <- RangeError: 'Fuel tank is depleted'

上面的代碼都是 ES5，那麼 ES6該如何實現呢？類聲明的書寫和對象的寫法十分類似，花括號前面只多了 class Name,類方法咱們將採用方法名簡寫的形式。contrustor 是構造函數，可在裏面初始化咱們想初始化的東西。

class Car {
  constructor () {
    this.fuel = 0
    this.distance = 0
  }
  move () {
    if (this.fuel < 1) {
      throw new RangeError('Fuel tank is depleted')
    }
    this.fuel--
    this.distance += 2
  }
  addFuel () {
    if (this.fuel >= 60) {
      throw new RangeError('Fuel tank is full')
    }
    this.fuel++
  }
}

須要強調的是：類和對象聲明寫起來是很像，可是在類中屬性及方法間是不容許使用逗號分隔的，分號卻是沒問題。

類靜態方法

大多數狀況下，類是有靜態方法的。回想一下咱們平常使用最多的數組，常見的實例方法有.filter、 .reduce、 .map,類方法有Array.isArray。ES5中添加類方法十分容易(類方法和靜態方法是同一個東西)：

// es5
function Car () {
  this.topSpeed = Math.random()
}
Car.isFaster = function (left, right) {
  return left.topSpeed > right.topSpeed
}

在 ES6的 class 語法中，咱們能夠使用static關鍵字修飾方法，進而獲得靜態方法。

class Car {
  constructor () {
    this.topSpeed = Math.random()
  }
  static isFaster (left, right) {
    return left.topSpeed > right.topSpeed
  }
}

那麼既然說classes是語法糖，那咱們一樣能夠使用以下方式實現靜態方法：

class Car {
  constructor () {
    this.topSpeed = Math.random()
  }
}
Car.isFaster = (left, right) => {
    return left.topSpeed > right.topSpeed;
}

目前 ES6還不支持使用 static 來修飾屬性，若想得到類的靜態屬性，該如何實現？請參考上面代碼，給出答案，能夠在評論區作答?
提供另外一種思路使用 get、set實現靜態屬性，try it.

類繼承

classes不只使類聲明變得簡單，它讓繼承變得更加可讀，容易。ES6中的 extends支持從基類衍生出更具個性化的子類。衆所周知，特斯拉較其餘汽車比較省油,特斯拉是啥。那麼，咱們基於上面的 Car來實現Tesla類。下面的代碼的意思是 Tesla 類繼承 Car,並複寫 Car 爸爸的 move 方法進而行駛更遠的距離。

class Tesla extends Car {
  move () {
    super.move()
    this.distance += 4
  }
}

var car = new Tesla()
car.addFuel()
car.move()
console.log(car.distance)

關於繼承，有一點須要特別注意，當子類想要實現特有的構造函數 constructor 時，首行必須使用 super(...)調用父類的構造函數，先獲得父類的this做爲本身的 this。此處的理論有一點點深，有機會再講。

class Car {
  constructor (speed) {
    this.speed = speed
  }
}
class Tesla extends Car {
  constructor (speed) {
    // 不調用 super 的話，會報錯
    super(speed * 2)
    // 作其餘初始化工做 。。。
  }
}

知識點總結

1. classes 只是語法糖，使類聲明和繼承書寫變的容易
2. 子類 constructor 要麼有，要麼首行調用super
3. 靜態方法static修飾
4. 子類會覆蓋父類的同名方法，可是能夠使用 super.xxxx 方法調用父類方法。

一步本人做了個決定，把Nicolás Bevacqua es6-in-depth都給翻譯了，若是侵權了我就馬上刪除🤞。不知道該如何快速提升我的技能，人還懶。望你們監督，各位前輩給指條進步明路也能夠。

原文ES6 Classes in Depth

🌚 前端學習QQ羣: 538631558 🌚

【開發環境推薦】 Cloud Studio 是基於瀏覽器的集成式開發環境，支持絕大部分編程語言，包括 HTML五、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，無需下載安裝程序，一鍵切換開發環境。 Cloud Studio提供了完整的 Linux 環境，而且支持自定義域名指向，動態計算資源調整，能夠完成各類應用的開發編譯與部署。