[翻]ECMAScript 6 特性速覽

原文地址:http://www.frontendjournal.com/javascript-es6-learn-important-features-in-a-few-minutes/

　　下一個Javascript版本，也就是ECMAScript 6(ES6或者Harmony)，給咱們帶來了不少使人興奮的特性。下面咱們來快速看看這些特性。下面列出的這些特性是我以爲極可能會在你平常工做中用到的。
　　若是你是一個Javascript新手或者原來是作服務器端開發的，那麼你也沒必要擔憂，我相信如今是學習Javascript的最好時機，由於ES6有不少簡介而且友好的特性。

類

　　總所周知，Javascript不像其餘面嚮對象語言那樣支持類，可是Javascript能夠經過函數和原型來模擬類。
　　下面是一個建立類的新語法。若是你學習過Java或者其餘面嚮對象語言的話，你會以爲很熟悉。

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

  start() {
    return "Project " + this.name + " starting";
  }
}

var project = new Project("Journal");  
project.start(); // "Project Journal starting"

　　全部你在類裏面聲明的方法都會添加到類的原型中。
　

ES6和原型中的繼承

　　正如前面說的，Javascript不支持類。因此，既然它不支持類，那麼它支持繼承嗎？
　　的確，Javascript中的繼承大部分是經過原型實現。若是你對原型不熟悉，那麼一個好消息就是在ES6中你不必瞭解原型就能夠使用類和繼承。原型並不難學習可是在這裏你只要知道原型是javascript中實現繼承的一種方式就能夠了。
　　下面我建立了一個Project的子類，命名爲WebProject而且繼承Project中的屬性和方法

class WebProject extends Project {  
  constructor(name, technologies) {
    super(name);
    this.technologies = technologies;
  }

  info() {
    return this.name + " uses " + arrayToString(this.technology);
  }
}

function arrayToString(param) {  
  // ... some implementation
}

var webJournal = new WebProject("FrontEnd Journal", "javascript");  
webJournal.start(); // "FrontEnd Journal starting"  
webJournal.info(); // "FrontEnd Journal uses javascript"

　　注意到在WebProject的構造函數中調用了Project的構造函數，而後就能夠使用它的屬性和方法了。
　　

模塊

　　若是你不想把你的JS代碼都放在一個文件中或者你想在你的應用中的其餘部分重用一些功能，那麼你就極可能要用到模塊。你須要記住的一個變量是export，只要在你要暴露出來的方法前面加上export就能夠了。
　　下面是咱們應用的結構。Project類和WebProject類被放在application.js中。

myproject (folder)  
 |
 -- modules (folder)
 |   |
 |   -- helpers.js
 |
 -- application.js

　　讓咱們把arrayToString()方法從application.js中分離出來而後放在modules/helpers.js模塊中，這樣咱們就能夠在其餘地方重用它了。

// modules/helper.js
export function arrayToString(param) {  
  // some implementation
}

　　如今咱們只須要在application.js中導入咱們的模塊就能夠了。

// application.js
import { arrayToString } from 'modules/helpers';

class WebProject extends Project {  
  constructor(name, technologies) {
    super(name);
    this.technologies = technology;
  }

  info() {
    return this.name + " uses " + arrayToString(this.technology);
  }
}

// ...

ES6的其餘特性

　　下面兩個ES6中的特性就比較有趣了。let和const。

let

　　爲了理解let，首先咱們須要記住var建立的是函數做用域的變量:

function printName() {  
  if(true) {
    var name = "Rafael";
  }
  console.log(name); // Rafael
}

　　注意到，不像Java或者許多其餘語言那樣，Javascript中任何在一個函數內部建立的變量都會被提高到函數的頂部。這就意味着不管你在哪裏聲明的變量，效果就像都是在函數頂部聲明的同樣。這種行爲就叫作提高
　　因此上面的函數能夠理解成下面這樣：

function printName() {  
  var name; // variable declaration is hoisted to the top
  if(true) {
    name = "Rafael";
  }
  console.log(name); // Rafael
}

　　那麼，let是如何工做的呢？
　　咱們用一樣的例子來看看:

function printName() {  
  if(true) {
    let name = "Rafael";
  }
  console.log(name); // ReferenceError: name is not defined
}

　　因爲let是在塊內部，因此name變量只能在塊中訪問。

function printName() {  
  var name = "Hey";
  if(true) {
    let name = "Rafael";
    console.log(name); // Rafael
  }
  console.log(name); // Hey
}

　　在這個例子中，因爲let引用了已經聲明的變量，因此"Rafael"只在塊內部合法。在塊的外部name的值是"Hey"。
　　總之，var是函數做用域的而let是塊級做用域的。

const

　　Javascript在過去很長一段時間都不支持建立常量。隨着ES6的到來，你將能夠建立常量而且保證它的值不會被改變。
　　建立常量的語法以下:

const SERVER_URL = "http://frontendjournal.com"

其餘有趣的特性

　　ECMAScript 6 同時還帶來了不少其餘特性:Map，WeakMap，Generators和Proxies。

何時能夠開始使用ES6？

　　Firefoxs是支持最多特性的瀏覽器而Juriy Zaytsev已經把主要瀏覽器的支持列出來了。 http://kangax.github.com/es5-compat-table/es6/
　　一些ES6特性在NodeJS中也能夠使用。能夠查看Alex Young的博客ES6 for Node。

結論

　　下一個版本的Javascript會帶來一個更加簡單更加友好的語法來幫助那些從面嚮對象語言轉過來的開發者的學習。如今的惟一的問題就是主要瀏覽器對ES6的全面支持還須要一些時間。

譯者注:

　　目前對ECMAScript 6支持比較好的兩個瀏覽器就是Chrome和Firefox，爲了更好地體驗ES6，咱們須要下載開發者版本的瀏覽器，Chrome Canary 下載地址，Firefox Aurora 下載地址。
　　要在Firfox中開啓ECMAScript 6，須要把<script type= "text/javascript">標籤改成<script type="applicationjavascript;version=1.8">。1.8是Firefox如今支持的版本最高的javascript。
　　在Chrome中開啓ECMAScript 6，只須要使用嚴格模式就能夠了，也就是在腳本前面加上"use strict"。不過在這以前還須要在地址欄中輸入chrome://flags/，而後啓用實驗性 JavaScript。