ES6、ES7、ES8学习指南（一）类、模块化、箭头函数、函数参数默认值

版本	发布时间	新特性
ES5	2009年11月	扩展了Object、Array、Function的功能等
ES6	2015年6月	类、模块化、箭头函数、函数参数默认值等
ES7	2016年3月	includes，指数操作符
ES8	2017年6月	async/await，Object.values()，Object.entries()，String padding等

ES6的特性

1.类（class）

class Animal{
	//构造函数，实例化时被调用，不指定则有一个不带参数的默认构造函数。
	constructor(name,color){
		this.name = name;
		this.color = color;
	}
	//toString 是原型对象上的属性
	toString(){
		console.log('name:' + this.name + ',color:' + this.color);
	}
}

var animal = new Animal('dog','white');//实例化Aniaml
animal.toString();

console.log(animal.hasOwnProperty('name'));//true
console.log(animal.hasOwnProperty('toString'));//false
console.log(animal._proto_.hasOwnProperty('toString'));//true

class Cat extends Aniaml{
	constructor(action){
	//子类必须在constructor中指定super函数，否则在新建实例时会报错。
	//如果没有置顶constructor，默认带super函数的constructor将会被添加。
	super('cat','white');
	this.action = action;
	}
	toString(){
		console.log(super.toString());
	}
}

var cat = new Cat('catch');
cat.toString();

//实例cat时Cat和Animal的实例，和ES5完全一致。
console.log(cat instanceof Cat);//true
console.log(cat instanceof Animal);//true

2.模块化（Module）

ES5不支持原生的模块化，在ES6中模块作为重要的组成部分被添加进来。
模块功能主要由 export 和 import 组成。
每个模块有自己单独的作用域，模块之间的相互调用关系是通过export 来规定模块对外暴露的接口，通过import 来引用其它模块提供的接口。
同时还为模块创造了命名空间，防止函数的命名冲突。

导出（export）

ES6允许在一个模块中使用export来导出多个变量或函数

导出变量

//test.js
export var name = 'Rainbow';

心得：ES6还可以导出常量。export const sqrt = Math.sqrt;//导出常量

ES6将一个文件视为一个模块，上面的模块通过export向外输出了一个变量。一个模块也可以同时向外面输出多个变量。

//test.js
var name = 'Rainbow';
var age = '24';
export{name,age};

导出函数

//myModule.js
export function myModule(someArg){
   return someArg;
}

导入（import）

定义好模块的输出后就可以在另一个模块通过import引用

import {myModule} from 'myModule';//main.js
import {name,age} from 'test';//test.js

心得：一条import语句可以同时导入默认函数和其它变量。import defaultMethod, { otherMethod } from 'xxx.js' ;

3.箭头（Arrow）函数

箭头函数与包围它的代码共享同一个this，能帮你很好的解决this的指向问题。有经验的Javascript开发者都熟悉诸如var self = this; 或 var that = this 这种引用外围this的模式。但借助=>，就不需要这种模式了。

箭头函数的结构

箭头函数的箭头=>之前：是一个空括号、单个的参数名、或用括号括起的多个参数名
箭头之后：可以是一个表达式（作为函数的返回值），或者是用花括号括起的函数体（需要自行通过return来返回值，否则返回的是undefined）

//箭头函数的例子
()=>1;
v=>v+1;
(a,b)=>a+b;
()=>{
	alert("foo");
}
e=>{
	if(e == 0){
		return 0;
	}
	return 1000/e;
}

不论是箭头函数还是bind，每次被执行都返回的是一个新的函数引用，因此如果你还需要函数的引用去做一些别的事情（譬如卸载监听器），那你必须自己保持这个引用。

卸载监听器时的陷阱

错误的做法

class PauseMenu extends React.Component{
	componentWillMount{
		AppStateIOS.addEventListener('change',this.onAppPaused.bind(this));
	}
	componentWillUnmount{
		AppStateIOS.removeEventListener('change',this.onAppPaused.bind(this));
	}
	onAppPaused(event){
	}
}

正确的做法

class PauseMenu extends React.Component{
	constructor(props){
		super(props);
		this._onAppPaused = this.onAppPaused.bind(this);//保存this，保证添加和移除监听器同一个this
	}
	componentWillMount{
		AppStateIOS.addEventListener('change',this._onAppPaused);
	}
	componentWillUnmount{
		AppStateIOS.removeEventListener('change',this._onAppPaused);
	}
	onAppPaused(event){
	}
}

除了上述做外，还可以：

class PauseMenu extends React.Component{
	componentWillMount(){
		AppStateIOS.addEventListener('change',this.onAppPaused);
	}
	componentWillUnmount(){
		AppStateIOS.removeEventListener('change',this.onAppPaused);
	}
	onAppPaused = (event) =>{
		//把函数直接作为一个arrow function的属性来定义，初始化的时候就绑定好了this指针
	}
}

4.函数参数默认值

ES6支持在定义函数时为其设置默认值

function foo(height = 50, color = 'red'){
	//...
}

不使用默认值时

function foo(height, color){
	var height = height || 50;
	var color = color || 'red';
}

这样写一般没问题，但当参数的布尔值为false时，就会有问题了。比如，我们这样调用foo函数

foo(0, "");

因为0的布尔值为false，这样的height的取值将是50.同理color的取值为‘red’。
所以说，函数参数默认值不仅能使代码简洁，同时能规避一些问题。