[譯]JavaScript ES6 class指南

CoderDock 發布于2019-08-21 10:37 / 379人閱讀

摘要：前言又稱通過一些新的關鍵字，使類成為了中一個新的一等公民。類聲明在中，有兩個聲明類的方式。在使用了新的關鍵字后在底層，所做的，也只是將這個方法添加為構造函數的一個屬性。在想要調用父類的構造函數時，你可以簡單地將關鍵字視作一個函數使用，如。

前言

EcmaScript 2015 （又稱ES6）通過一些新的關鍵字，使類成為了JS中一個新的一等公民。但是目前為止，這些關于類的新關鍵字僅僅是建立在舊的原型系統上的
語法糖，所以它們并沒有帶來任何的新特性。不過，它使代碼的可讀性變得更高，并且為今后版本里更多面向對象的新特性打下了基礎。

這樣做的原因是為了保證向后兼容性。也就是，舊代碼可以在不做任何hack的情況下，與新代碼同時運行。

定義類

讓我們回想一下在ES5中定義一個類的方式。通過不是很常用的Object.defineProperty方法，我可以定義一些只讀的屬性。

function Vehicle(make, year) {
  Object.defineProperty(this, "make", {
    get: function() { return make; }
  });

  Object.defineProperty(this, "year", {
    get: function() { return year; }
  });
}

Vehicle.prototype.toString = function() {
  return this.make + " " + this.year;
}

var vehicle = new Vehicle("Toyota Corolla", 2009);

console.log(vehicle.make); // Toyota Corolla
vehicle.make = "Ford Mustang";
console.log(vehicle.toString()) // Toyota Corolla 2009

很簡單，我們定義了一個有兩個只讀屬性和一個自定義toString方法的Vehicle類。讓我們在ES6中來做一樣的事情：

class Vehicle {
  constructor(make, year) {
    this._make = make;
    this._year = year;
  }

  get make() {
    return this._make;
  }

  get year() {
    return this._year;
  }

  toString() {
    return `${this.make} ${this.year}`;
  }
}

var vehicle = new Vehicle("Toyota Corolla", 2009);

console.log(vehicle.make); // Toyota Corolla
vehicle.make = "Ford Mustang";
console.log(vehicle.toString()) // Toyota Corolla 2009

上面兩個例子中定義的類有一個不同的地方。我們為了享受新的get語法帶來的好處，所以只是將make和year定義成了普通的屬性。這使它們可以被外部所改變。如果你確實需要一個嚴格的私有屬性，還是請繼續使用defineProperty。

類聲明

在ES6中，有兩個聲明類的方式。第一種方法叫作類聲明，這也是我們在上述例子中使用的方式。

class Vehicle() {
}

有一個需要注意的地方是，類聲明與函數聲明不同，它不會被提升（hoisted）。例如，以下的代碼工作正常：

console.log(helloWorld());

function helloWorld() {
  return "Hello World";
}

但是，以下代碼會拋出一個異常：

var vehicle = new Vehicle();

class Vehicle() {
}

類表達式

另一個定義類的方式叫做類表達式。它與函數表達式的運行方式完全一樣。一個類表達式可以是具名的也可以是匿名的。

var Vehicle = class {
}

var Vehicle = class VehicleClass {
  constructor() {
    // VehicleClass is only available inside the class itself
  }
}

console.log(VehicleClass); // throws an exception

靜態方法

static關鍵字是ES6的另一個語法糖，它使靜態方法聲明也成為了一個一等公民。在ES5中，靜態方法就像是構造函數的一個屬性。

function Vehicle() {
  // ...
}

Vehicle.compare = function(a, b) {
  // ...
}

在使用了新的static關鍵字后：

class Vehicle {
  static compare(a, b) {
    // ...
  }
}

在底層，JavaScript所做的，也只是將這個方法添加為Vehicle構造函數的一個屬性。值得注意的是，你也可以用同樣的語法為類添加靜態屬性。

類繼承

舊的原型繼承有時看起來讓人非常頭疼。ES6中新的extends關鍵字解決了這個問題。在ES5，我們是這么做的：

function Motorcycle(make, year) {
  Vehicle.apply(this, [make, year]);
}

Motorcycle.prototype = Object.create(Vehicle.prototype, {
  toString: function() {
    return "Motorcycle " + this.make + " " + this.year;
  }
});

Motorcycle.prototype.constructor = Motorcycle;

使用的新的extends關鍵字，看上去就清晰多了：

class Motorcycle extends Vehicle {
  constructor(make, year) {
    super(make, year);
  }

  toString() {
    return `Motorcycle ${this.make} ${this.year}`;
  }
}

super關鍵字也可以用于靜態方法：

class Vehicle {
  static compare(a, b) {
    // ...
  }
}

class Motorcycle {
  static compare(a, b) {
    if (super.compare(a, b)) {
      // ...
    }
  }
}

super關鍵字

上一個例子也展示了新的super關鍵字的用法。當你想要調用父類的函數時，這個關鍵字就顯得十分好用。

在想要調用父類的構造函數時，你可以簡單地將super關鍵字視作一個函數使用，如super(make, year)。對于父類的其他函數，你可以將super視作一個對象，如super.toString()。例子：

class Motorcycle extends Vehicle {
  toString() {
    return "Motorcycle " + super.toString();
  }
}

可被計算的方法名

當在class中聲明屬性時，定義屬性名時，你可以使用表達式。這個語法特性在一些ORM類庫中將會非常流行。例子：

function createInterface(name) {
  return class {
    ["findBy" + name]() {
      return "Found by " + name;
    }
  }
}

const Interface = createInterface("Email");
const instance = new Interface();

console.log(instance.findByEmail());

最后

在當前，使用class關鍵字來聲明類，而不使用原型，獲得的僅僅是語法上的優勢。但是，這個是一個適應新語法和新實踐的好開始。JavaScript每天都在變得更好，并且通過class關鍵字，可以使各種工具更好得幫助你。

原文地址

https://strongloop.com/strongblog/an-introduction-to-javascript-es6-classes/

GPU云服務器云服務器 es6中的class es6class javascript指南 javascript教程指南

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/85895.html

[譯]JavaScript ES6解構賦值指南

摘要：解構賦值允許我們將右邊的表達式看起來也像變量聲明一般，然后在左邊將值一一提取。數組的解構賦值現在假設我們有一個變量，其值為。通過，這會看上去更清晰簡潔最后的解構賦值給的語法帶來了更多的現代化。前言讓我們來仔細地看看ES6所帶來的更清晰的變量聲明與賦值語法。現今的變量聲明語法十分的直接：左邊是一個變量名，右邊可以是一個數組：[]的表達式或一個對象：{}的表達式，等等。解構賦值允許我...

Jeff 2019-08-21 10:33 評論0 收藏0
[譯]JavaScript ES6迭代器指南

摘要：前言又稱提供一個全新的迭代器的概念，它允許我們在語言層面上定義一個有限或無限的序列。后者可以被用來幫助我們理解迭代器。但是當我們使用迭代器時，這個問題就迎刃而解了。是中的新語法，用來配合迭代器。這是因為數組的迭代器只返回其中預期的元素。前言 EcmaScript 2015 （又稱ES6）提供一個全新的迭代器的概念，它允許我們在語言層面上定義一個（有限或無限的）序列。暫時先拋開它...

daryl 2019-08-21 10:36 評論0 收藏0
[譯]JavaScript ES6箭頭函數指南

摘要：以下例子的目的是使用來展示一個每秒都會更新的時鐘當嘗試在的回調中使用來引用元素時，很不幸，我們得到的只是一個屬于回調函數自身上下文的。前言胖箭頭函數（Fat arrow functions），又稱箭頭函數，是一個來自ECMAScript 2015（又稱ES6）的全新特性。有傳聞說，箭頭函數的語法=>，是受到了CoffeeScript 的影響，并且它與CoffeeScript中的=>...

makeFoxPlay 2019-08-14 12:35 評論0 收藏0
[譯] 從 CoffeeScript 遷移到 ES6

摘要：語法校驗會給出警告當你仍在使用或不通過任何關鍵字聲明變量時。但是如果腳本中還有其他的普通導出，就會得到非常奇怪的結果這個坑爹的情況目前還沒有任何好的解決方案。我在多年前愛上了coffeScript。對于javaScript，我一直保持著深沉的愛，也十分高興得看到node.js的快速發展，但是作為一個有python背景的程序員，我更喜歡coffeeScript的簡練語法。在任何一個活...

劉東 2019-08-22 10:57 評論0 收藏0
[譯]JavaScript ES6模塊指南

摘要：模塊可以導入和導出各種類型的變量，如函數，對象，字符串，數字，布爾值，等等。所以這可能會導致一些不符合預期的行為。可變的基本類型值在導入一些基本類型的值如數字，布爾值或字符串時，可能會產生一個有趣的副作用。前言 ECMAScript 2015（又稱ES6）提供了一個前端JavaScript缺失已久的特性 —— 模塊。ES2015中的模塊參考了CommonJS規范（目前Node.js的...

yimo 2019-08-19 17:10 評論0 收藏0