[翻]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。