何为ES6？

ES6全称ECMAScript 6.0，ES6于2015年6月17日发布，ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMAScript-262。

下面我为大家列举了ES6新特性中对我们开发影响比较大的六方面的特性。

1.类（class）

对熟悉Java，object-c，c#等纯面向对象语言的开发者来说，都会对class有一种特殊的情怀。ES6 引入了class（类），让JavaScript的面向对象编程变得更加简单和易于理解。

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');//实例化Animal

 animal.toString();

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

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

 console.log(animal.__proto__.hasOwnProperty('toString')); // true

 class Cat extends Animal {

  constructor(action) {

    // 子类必须要在constructor中指定super 方法，否则在新建实例的时候会报错.

    // 如果没有置顶consructor,默认带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）函数

这是ES6中最令人激动的特性之一。=>不只是关键字function的简写，它还带来了其它好处。箭头函数与包围它的代码共享同一个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，每次被执行都返回的是一个新的函数引用，因此如果你还需要函数的引用去做一些别的事情（譬如卸载监听器），那么你必须自己保存这个引用。

4.ES6不再有自动绑定

在ES5中，React.createClass会把所有的方法都bind一遍，这样可以提交到任意的地方作为回调函数，而this不会变化。但在ES6中没有了自动绑定，也就是说，你需要通过bind或者箭头函数来手动绑定this引用。

// 通过使用 bind() 来绑定`this`

<div onClick={this.tick.bind(this)}>

// 也可通过使用箭头函数来实现

<div onClick={() => this.tick()}>

心得： 因为无论是箭头函数还是bind()每次被执行都返回的是一个新的函数引用，所以，推荐大家在组件的构造函数中来绑定this。

constructor(props) {

  super(props);

  this.state = {count: props.initialCount};

  this.tick = this.tick.bind(this);//在构造函数中绑定`this`

}

// 使用

<div onClick={this.tick}>

5.static关键字

在ES6中我们可以通过static关键字来定义一个类函数。

class People {

    constructor(name) { //构造函数

          this.name = name;

    }

    sayName() {

          console.log(this.name);

    }

    static formatName(name) //将formatName定义为类方法

        return name[0].toUpperCase() + name.sustr(1).toLowerCase();

    }

}

console.log(People.formatName("tom")); //使用类方法formatName

ES6 VS ES5（ES6与ES5的区别）

新版本的React /React Native使用了ES6标准，下面就让我们一起了解一下基于ES6的React/React Native相比ES5有哪些不同。

心得：很多React/React Native的初学者经常会被ES6问题迷惑：官方建议我们ES6，但是网上搜到的很多教程和例子都是基于ES5版本的，所以很多人感觉无法下手，下面就让我们一起认识ES6与ES5在React/React Native开发上有哪些不同和需要注意的地方。