React系列（三）：ECMAScript6.0的使用（上）

随着google和firfox以及node6.0对ES6的支持，ES6语法的定稿使它越来越受到关注，尤其是react项目基本上都是用ES6来写的。本文主要就是对ES6基础语法做出解析，为后续的React知识点做好铺垫，主要内容如下：

let, const：块级作用域—声明变量

class, extends, super： 类，继承，指代父类

arrow functions：箭头函数

template string：字符串操作

destructuring：变量解构

1. let, const：块级作用域—声明变量

1.1 变量使用

ES5下的作用域：

变量i是var声明的，在全局范围内都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值。为了能够保留执行过程的值，所以使用闭包的形式：

避免内存泄漏，不建议使用闭包，所以ES6提出了块级作用域let，采用ES6的语法：

let属于块级作用域，不允许在代码块的外面使用申明的变量

if(1) {lets =0;}

console.log(s);

在同一代码块中不允许使用let重复定义同名变量（不同代码块中可以重复声明）

lets =0;lets =7;

console.log(s);

1.2 常量

关于常量的定义，ES6提出了const；

一旦使用const声明常量，就不允许对其更改值，如果修改，浏览器报错； 

const多数应用于引入第三方库时声明变量，用来避免重名的bug。

const   react =require("react");

2. class, extends, super： 类，继承，指代父类

面向对象的使用，ES6提出了class的写法，让对象的原型更具备形式。

首先用class定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享（可继承）的，代码如下：

解析：

class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承要简单许多。上面定义了一个Infor类，该类通过extends关键字，继承了Project类的所有属性和方法。

super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

总之，ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。

3. arrow functions：箭头函数

ES5的函数：

ES6的函数：

箭头函数的应用，主要应用于解决this指向问题

setTimeOut的this指向window全局

ES5的处理有两种： 

1、预存this

2、借助bind(this)

ES6使用箭头函数实例：

解析：

使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this

4. template string：字符串模板

使用字符串拼接的时候，ES5是用一堆的”” +来连接文本与变量：

使用ES6的字符串模板（变量e、f 来源于上图）：

5. destructuring：变量解构

5.1 结构赋值的使用：

ES5的对象赋值：

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构：

可以放过来书写：

5.2 解构赋值在箭头函数应用

解构赋值中箭头函数指向window。

总结

本文主要讲解了ES6语法中变量、常量、函数、类与继承等基础知识点，下节讲继续更加深入的剖析ES6的核心语法。