JavaScript语言教程
学习Javascript ES6几个重要特性
新一代的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 = "https://www.jdon.com"
ES6还有其他新功能:Map, WeakMap, generators 和Proxies
那么什么时候可以使用ES6这些特性呢?可见下面这个网址:
http://kangax.github.com/es5-compat-table/es6/
Node.JS的ES6特性可见:ES6 for Node