下一代javascript的几个特性

新一代的javascript也被称为ECMAScript 6(也称为 ES6 or Harmony)给我们带来很多令人意想不到的功能，在这里我们花费几分钟来学习一下其中重要的功能。

糖语法

首先，语法糖是一种语法，使得语言更容易理解和更具有可读性，它使语言相对我们来说变得更"甜"。这也意味着ES6的一些"新"的特点并不是真的新，只是试图简化语法而已，让我们编程更容易。这样就无需使用老式的取巧的方法编写你的代码，而是可以一种更简单的方式来编写代码，那就是使用糖语法。

javascript并不像其他面向对象语言一样支持类这个概念，相反js使用function和prototype模拟类的概念。

下面是创建类的新语法，如果你有来自Java或其他OO语言的背景你会很熟悉：

class Project {

constructor(name) {

this.name = name;

}



start() {

return "Project " + this.name + " starting";

}

}



var project = new Project("Journal");

project.start(); // "Project Journal starting"

你在这个类中定义的所有方法都被加入这个类的原型prototype中。

既然JS不支持类，那么它支持继承吗？

是的，JS中继承是通过prototype实现。下面是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的构造器，这样可以使用它的属性和方法。

模块Module

如果你想将所有js放在一个文件中，或者你要在应用的不同地方使用相同的功能，你就要使用模块，记住魔术的关键词是export，在你的函数之前使用export。

假设Project 和 WebProject 都储存在application.js文件中，如下源码结构：

myproject (folder)

|

-- modules (folder)

| |

| -- helpers.js

|

-- application.js

如果我们从application.js中分离arrayToString()，然后放入modules/helpers.js，这样我们在其他地方可以重用它：

// modules/helper.js

export function arrayToString(param) {

// some implementation

}

这样我们只需要导入我们的模块即可：

// 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);

}

}



// ...

let和const

ES6中有两个新特性：let和 const，为了理解let，我们需要记住var是创建函数生存期内的变量：

function printName() {

if(true) {

var name = "Rafael";

}

console.log(name); // Rafael

}

不像Java或其他语言，任何变量在JS中是在一个函数内创建，它会升级到哦函数之外部，不管你在哪里定义变量，都和你在函数顶部定义一样，这个行为称为hoisting。

上面代码用下面方式容易理解些：

function printName() {

var name; // variable declaration is hoisted to the top

if(true) {

name = "Rafael";

}

console.log(name); // Rafael

}

那么let是如何工作呢，和hoisting有什么关系，我们导入let的代码如下：

function printName() {

if(true) {

let name = "Rafael";

}

console.log(name); // ReferenceError: name is not defined

}

let是在一个代码块内，变量名只能在代码块中可见。

function printName() {

var name = "Hey";

if(true) {

let name = "Rafael";

console.log(name); // Rafael

}

console.log(name); // Hey

}

总结：var是function-scoped，而let是 block-scoped.

const是创建常量使用，一旦创建就一直不会被概念，如下：

const SERVER_URL = "http://www.jdon.com"

ES6还有其他新功能：Map, WeakMap, generators 和Proxies

那么什么时候可以使用ES6这些特性呢？可见下面这个网址：

http://kangax.github.com/es5-compat-table/es6/

Node.JS的ES6特性可见：ES6 for Node



[转自www.jdon.com的js语言学习教程