摘要：類總所周知，不像其他面向?qū)ο笳Z(yǔ)言那樣支持類，但是可以通過(guò)函數(shù)和原型來(lái)模擬類。如果你學(xué)習(xí)過(guò)或者其他面向?qū)ο笳Z(yǔ)言的話，你會(huì)覺(jué)得很熟悉。結(jié)論下一個(gè)版本的會(huì)帶來(lái)一個(gè)更加簡(jiǎn)單更加友好的語(yǔ)法來(lái)幫助那些從面向?qū)ο笳Z(yǔ)言轉(zhuǎn)過(guò)來(lái)的開(kāi)發(fā)者的學(xué)習(xí)。

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

　　下一個(gè)Javascript版本，也就是ECMAScript 6(ES6或者Harmony)，給我們帶來(lái)了很多令人興奮的特性。下面我們來(lái)快速看看這些特性。下面列出的這些特性是我覺(jué)得很可能會(huì)在你日常工作中用到的。
　　如果你是一個(gè)Javascript新手或者原來(lái)是做服務(wù)器端開(kāi)發(fā)的，那么你也不必?fù)?dān)心，我相信現(xiàn)在是學(xué)習(xí)Javascript的最好時(shí)機(jī)，因?yàn)镋S6有很多簡(jiǎn)介并且友好的特性。

類

　　總所周知，Javascript不像其他面向?qū)ο笳Z(yǔ)言那樣支持類，但是Javascript可以通過(guò)函數(shù)和原型來(lái)模擬類。
　　下面是一個(gè)創(chuàng)建類的新語(yǔ)法。如果你學(xué)習(xí)過(guò)Java或者其他面向?qū)ο笳Z(yǔ)言的話，你會(huì)覺(jué)得很熟悉。

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

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

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

　　所有你在類里面聲明的方法都會(huì)添加到類的原型中。
　

ES6和原型中的繼承

　　正如前面說(shuō)的，Javascript不支持類。所以，既然它不支持類，那么它支持繼承嗎？
　　的確，Javascript中的繼承大部分是通過(guò)原型實(shí)現(xiàn)。如果你對(duì)原型不熟悉，那么一個(gè)好消息就是在ES6中你沒(méi)必要了解原型就可以使用類和繼承。原型并不難學(xué)習(xí)但是在這里你只要知道原型是javascript中實(shí)現(xiàn)繼承的一種方式就可以了。
　　下面我創(chuàng)建了一個(gè)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的構(gòu)造函數(shù)中調(diào)用了Project的構(gòu)造函數(shù)，然后就可以使用它的屬性和方法了。
　　

模塊

　　如果你不想把你的JS代碼都放在一個(gè)文件中或者你想在你的應(yīng)用中的其他部分重用一些功能，那么你就很可能要用到模塊。你需要記住的一個(gè)變量是export，只要在你要暴露出來(lái)的方法前面加上export就可以了。
　　下面是我們應(yīng)用的結(jié)構(gòu)。Project類和WebProject類被放在application.js中。

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

　　讓我們把arrayToString()方法從application.js中分離出來(lái)然后放在modules/helpers.js模塊中，這樣我們就可以在其他地方重用它了。

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

　　現(xiàn)在我們只需要在application.js中導(dǎo)入我們的模塊就可以了。

// 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的其他特性

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

let

　　為了理解let，首先我們需要記住var創(chuàng)建的是函數(shù)作用域的變量:

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

　　注意到，不像Java或者許多其他語(yǔ)言那樣，Javascript中任何在一個(gè)函數(shù)內(nèi)部創(chuàng)建的變量都會(huì)被提升到函數(shù)的頂部。這就意味著無(wú)論你在哪里聲明的變量，效果就像都是在函數(shù)頂部聲明的一樣。這種行為就叫做提升
　　所以上面的函數(shù)可以理解成下面這樣：

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

　　那么，let是如何工作的呢？
　　我們用同樣的例子來(lái)看看:

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

　　由于let是在塊內(nèi)部，所以name變量只能在塊中訪問(wèn)。

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

　　在這個(gè)例子中，由于let引用了已經(jīng)聲明的變量，所以"Rafael"只在塊內(nèi)部合法。在塊的外部name的值是"Hey"。
　　總之，var是函數(shù)作用域的而let是塊級(jí)作用域的。

const

　　Javascript在過(guò)去很長(zhǎng)一段時(shí)間都不支持創(chuàng)建常量。隨著ES6的到來(lái)，你將可以創(chuàng)建常量并且保證它的值不會(huì)被改變。
　　創(chuàng)建常量的語(yǔ)法如下:

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

其他有趣的特性

　　ECMAScript 6 同時(shí)還帶來(lái)了很多其他特性:Map，WeakMap，Generators和Proxies。

什么時(shí)候可以開(kāi)始使用ES6？

　　Firefoxs是支持最多特性的瀏覽器而Juriy Zaytsev已經(jīng)把主要瀏覽器的支持列出來(lái)了。 http://kangax.github.com/es5-compat-table/es6/
　　一些ES6特性在NodeJS中也可以使用?？梢圆榭碅lex Young的博客ES6 for Node。

結(jié)論

　　下一個(gè)版本的Javascript會(huì)帶來(lái)一個(gè)更加簡(jiǎn)單更加友好的語(yǔ)法來(lái)幫助那些從面向?qū)ο笳Z(yǔ)言轉(zhuǎn)過(guò)來(lái)的開(kāi)發(fā)者的學(xué)習(xí)?，F(xiàn)在的唯一的問(wèn)題就是主要瀏覽器對(duì)ES6的全面支持還需要一些時(shí)間。

譯者注:

　　目前對(duì)ECMAScript 6支持比較好的兩個(gè)瀏覽器就是Chrome和Firefox，為了更好地體驗(yàn)ES6，我們需要下載開(kāi)發(fā)者版本的瀏覽器，Chrome Canary 下載地址，F(xiàn)irefox Aurora 下載地址。
　　要在Firfox中開(kāi)啟ECMAScript 6，需要把