何為ES6狭吼？

ES6全稱ECMAScript 6.0殊橙，ES6于2015年6月17日發(fā)布，ECMAScript是ECMA制定的標準化腳本語言俄精。目前JavaScript使用的ECMAScript版本為ECMAScript-262询筏。

下面我為大家列舉了ES6新特性中對我們開發(fā)影響比較大的六方面的特性。

1.類（class）

對熟悉Java竖慧，object-c嫌套，c#等純面向對象語言的開發(fā)者來說，都會對class有一種特殊的情懷测蘑。ES6 引入了class（類）灌危，讓JavaScript的面向對象編程變得更加簡單和易于理解。

class Animal {
    // 構造方法碳胳，實例化的時候將會被調用勇蝙，如果不指定，那么會有一個不帶參數(shù)的默認構造函數(shù).
    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 來規(guī)定模塊對外暴露的接口怨绣，通過import來引用其它模塊提供的接口角溃。同時還為模塊創(chuàng)造了命名空間，防止函數(shù)的命名沖突篮撑。

導出(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};

導出函數(shù)

// 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）函數(shù)

這是ES6中最令人激動的特性之一。=>不只是關鍵字function的簡寫纸型，它還帶來了其它好處又碌。箭頭函數(shù)與包圍它的代碼共享同一個this,能幫你很好的解決this的指向問題。有經(jīng)驗的JavaScript開發(fā)者都熟悉諸如var self = this;或var that = this這種引用外圍this的模式绊袋。但借助=>，就不需要這種模式了铸鹰。

箭頭函數(shù)的結構

箭頭函數(shù)的箭頭=>之前是一個空括號癌别、單個的參數(shù)名、或用括號括起的多個參數(shù)名蹋笼，而箭頭之后可以是一個表達式（作為函數(shù)的返回值）展姐，或者是用花括號括起的函數(shù)體（需要自行通過return來返回值，否則返回的是undefined）剖毯。

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

心得：不論是箭頭函數(shù)還是bind圾笨，每次被執(zhí)行都返回的是一個新的函數(shù)引用，因此如果你還需要函數(shù)的引用去做一些別的事情（譬如卸載監(jiān)聽器）逊谋，那么你必須自己保存這個引用擂达。

4.ES6不再有自動綁定

在ES5中，React.createClass會把所有的方法都bind一遍胶滋，這樣可以提交到任意的地方作為回調函數(shù)板鬓，而this不會變化。但在ES6中沒有了自動綁定究恤，也就是說俭令，你需要通過bind或者箭頭函數(shù)來手動綁定this引用。

// 通過使用 bind() 來綁定`this`
<div onClick={this.tick.bind(this)}>
// 也可通過使用箭頭函數(shù)來實現(xiàn)
<div onClick={() => this.tick()}>  

心得： 因為無論是箭頭函數(shù)還是bind()每次被執(zhí)行都返回的是一個新的函數(shù)引用部宿，所以抄腔，推薦大家在組件的構造函數(shù)中來綁定this。

constructor(props) {
  super(props);
  this.state = {count: props.initialCount};
  this.tick = this.tick.bind(this);//在構造函數(shù)中綁定`this`
}
// 使用
<div onClick={this.tick}>

5.static關鍵字

在ES6中我們可以通過static關鍵字來定義一個類函數(shù)理张。

class People {
    constructor(name) { //構造函數(shù)
          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的區(qū)別）

新版本的React /React Native使用了ES6標準赫蛇，下面就讓我們一起了解一下基于ES6的React/React Native相比ES5有哪些不同。

心得：很多React/React Native的初學者經(jīng)常會被ES6問題迷惑：官方建議我們ES6涯穷，但是網(wǎng)上搜到的很多教程和例子都是基于ES5版本的棍掐，所以很多人感覺無法下手，下面就讓我們一起認識ES6與ES5在React/React Native開發(fā)上有哪些不同和需要注意的地方拷况。

下面是我們需要知道的ES6與ES5在4大方面上的區(qū)別作煌。

1.在定義方面的不同

在定義組件掘殴，方法，屬性等方面粟誓，ES6與ES5是有所不同的奏寨，下面就讓我們一起看一下有哪些不同。

心得：因為向下兼容的原因鹰服，你在開發(fā)過程中可使用ES6也可以使用ES5的規(guī)范病瞳，但為了代碼的風格一致性，建議盡量減少混寫悲酷。

定義組件

ES5

在ES5里套菜，通常通過React.createClass來定義一個組件類，像這樣：

var Photo = React.createClass({
    render: function() {
        return (
            <Image source={this.props.source} />
        );
    },
});

ES6

在ES6里设易，我們通過繼承React.Component 來定義一個組件類逗柴，像這樣：

class Photo extends React.Component {
    render() {
        return (
            <Image source={this.props.source} />
        );
    }
}

定義方法
相比ES5，ES6在方法定義上語法更加簡潔顿肺，從上面的例子里可以看到戏溺，給組件定義方法不再用 名字: function()的寫法，而是直接用名字()屠尊，在方法的最后也不能有逗號了旷祸。

ES5

var Photo = React.createClass({
    test: function(){
    },
    render: function() {
        return (
            <Image source={this.props.source} />
        );
    },
});

ES6

class Photo extends React.Component {
    test() {
    }
    render() {
        return (
            <Image source={this.props.source} />
        );
    }
}

定義組件的屬性類型和默認屬性

ES5

在ES5里，屬性類型和默認屬性分別通過propTypes成員和getDefaultProps方法來實現(xiàn)讼昆。

var Video = React.createClass({
    getDefaultProps: function() {
        return {
            autoPlay: false,
            maxLoops: 10,
        };
    },
    propTypes: {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
        videoSrc: React.PropTypes.string.isRequired,
    },
    render: function() {
        return (
            <View />
        );
    },
});

ES6

在ES6里托享，可以統(tǒng)一使用static成員來實現(xiàn)。

class Video extends React.Component {
    static defaultProps = {
        autoPlay: false,
        maxLoops: 10,
    };  // 注意這里有分號
    static propTypes = {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
        videoSrc: React.PropTypes.string.isRequired,
    };  // 注意這里有分號
    render() {
        return (
            <View />
        );
    } // 注意這里既沒有分號也沒有逗號
}

也有人這么寫浸赫，雖然不推薦嫌吠，但讀到代碼的時候你應當能明白它的意思：

class Video extends React.Component {
    render() {
        return (
            <View />
        );
    }
}
Video.defaultProps = {
    autoPlay: false,
    maxLoops: 10,
};
Video.propTypes = {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
};

心得:對React開發(fā)者而言，static在一些老版本的瀏覽器上是不支持的掺炭。React Native開發(fā)者可以不用擔心這個問題辫诅。

2.在導入(import)與導出(export)組件上的不同

導入組件

ES5

在ES5里，如果使用CommonJS標準涧狮，引入React包基本通過require進行炕矮，代碼類似這樣：

var React = require("react");
var {
    Component,
    PropTypes
} = React;  //引用React抽象組件

var ReactNative = require("react-native");
var {
    Image,
    Text,
} = ReactNative;  //引用具體的React Native組件

var AboutPage=require('./app/AboutPage') //引入app目錄下AboutPage組件，即AboutPag.js
var PopularPage=require('./app/PopularPage') //引入app目錄下PopularPage組件者冤，即PopularPage.js
var FavoritePage=require('./app/FavoritePage') //引入app目錄下FavoritePage組件肤视，即FavoritePage.js

ES6

在ES6里，沒有了require涉枫，而是使用import來導入組件邢滑，有點像Java的寫法。

import React, { 
    Component,
    PropTypes,
} from 'react';//引用React抽象組件

import {
    Image,
    Text
} from 'react-native' //引用具體的React Native組件

import AboutPage from './app/AboutPage' //引入app目錄下AboutPage組件愿汰，即AboutPag.js
import PopularPage from './app/PopularPage' //引入app目錄下PopularPage組件困后，即PopularPage.js
import FavoritePage  from './app/FavoritePage' //引入app目錄下FavoritePage組件乐纸，即FavoritePage.js

另外，ES6支持將組件導入作為一個對象摇予，使用“ * as”修飾即可汽绢。

//引入app目錄下AboutPage組件作為一個對象，接下來就可使用“AboutPage.”來調用AboutPage的方法及屬性了侧戴。  
import  * as AboutPage from './app/AboutPage' 

心得：使用“ * as ”修飾后宁昭，導入的組件直接被實例化成一個對象，可以使用“.”語法來調用組件的方法和屬性酗宋，和沒有“ * as ”修飾是有本質區(qū)別的积仗，使用的時候要特別注意。

導出組件

ES5
在ES5里蜕猫，要導出一個類給別的模塊用斥扛，一般通過module.exports來導出：

var MyComponent = React.createClass({
    ...
});
module.exports = MyComponent;

ES6
在ES6里，通常用export default來實現(xiàn)相同的功能：

export default class MyComponent extends Component{
    ...
}

3.在初始化state上的不同

ES5

var Video = React.createClass({
    getInitialState: function() {
        return {
            loopsRemaining: this.props.maxLoops,
        };
    },
})

ES6
ES6下丹锹，有兩種寫法：

class Video extends React.Component {
    state = {
        loopsRemaining: this.props.maxLoops,
    }
}

不過我們推薦更易理解的在構造函數(shù)中初始化（這樣你還可以根據(jù)需要做一些計算）：

class Video extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            loopsRemaining: this.props.maxLoops,
        };
    }
}

4.在方法作為回調上的不同

在開發(fā)工作中，經(jīng)常會使用到回調芬失，如按鈕的單擊回調等楣黍，這也是在很多編程語言中都會經(jīng)常出現(xiàn)的情況。ES6與ES5在使用回調方面是有區(qū)別的棱烂。

ES5

var PostInfo = React.createClass({
    handleOptionsButtonClick: function(e) {
        // Here, 'this' refers to the component instance.
        this.setState({showOptionsModal: true});
    },
    render: function(){
        return (
            <TouchableHighlight onPress={this.handleOptionsButtonClick}>
                <Text>{this.props.label}</Text>
            </TouchableHighlight>
        )
    },
});

在ES5中租漂，React.createClass會把所有的方法都bind一遍，這樣可以提交到任意的地方作為回調函數(shù)颊糜，而this不會變化哩治。但官方現(xiàn)在逐步認為這反而是不標準、不易理解的衬鱼。

在ES6下业筏，你需要通過bind來綁定this引用，或者使用箭頭函數(shù)（它會綁定當前scope的this引用）：

ES6

class PostInfo extends React.Component{
    handleOptionsButtonClick(e){
        this.setState({showOptionsModal: true});
    }
    render(){
        return (
            <TouchableHighlight 
                onPress={this.handleOptionsButtonClick.bind(this)}
                //onPress={e=>this.handleOptionsButtonClick(e)}//這種方式和上面的效果是一樣的
                >
                <Text>{this.props.label}</Text>
            </TouchableHighlight>
        )
    },·
}