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下的作用域：

var name = "H5";
while(true) {
    var name = "CSS3";
    console.log(name);
    break;
}
console.log(name);
// ES5的作用域分两种，一个是全局，一个函数
var a = [];
for(var i = 0; i < 10; i++) {
    a[i] = function() {
        console.log(i);
    }
}
a[5]();

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

var a = [];
for(var i = 0; i < 10; i++) {
    a[i] = function(x) {
        return function() {
            console.log(x);
        }
    }(i)
}
a[6]();

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

var a = [];
for(let i = 0; i < 10; i++) {
    a[i] = function() {
        console.log(i);
    }
}
a[5]();

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

if(1) {
    let s = 0;
}
console.log(s);

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

let s = 0;
let s = 7;
console.log(s);

1.2 常量

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

const str = "HTML5";
str = "CSS3";
console.log(str);

一旦使用const声明常量，就不允许对其更改值，如果修改，浏览器报错；
const多数应用于引入第三方库时声明变量，用来避免重名的bug。

const react = require("react");

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

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

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

class Project {
    constructor() {
        this.type = "H5";
    }
    says(say) {
        console.log(this.type + " and " + say);
    }
}
let pro = new Project();
pro.says("CSS3");

class Infor extends Project {
    constructor() {
        super();
        this.type = "JS";
    }
}
let infor = new Infor();
infor.says("JQ");

解析：

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

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

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

3. arrow functions：箭头函数

ES5的函数：

function log(i) {
    return i + 1;
}
console.log(log(6));

ES6的函数：

var log = (i) => {return i + 1};
console.log(log(6));

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

• setTimeOut的this指向window全局
• ES5的处理有两种：
  
  • 1、预存this
  • 2、借助bind(this)

ES6使用箭头函数实例：

class Projects {
    constructor() {
        this.type = "H5";
    }
    says(say) {
        // ES5预存this
        // var self = this;
        setTimeout(() => {
            console.log(this.type + " and " + say);
            // ES5使用setTimeout(function(){}.bind(this), 2000);
        }, 2000);
    }
}
let pros = new Projects();
pros.says("CSS3");

解析：

• 使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
• 并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this

4. template string：字符串模板

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

var e = "HTML5";
var f = "CSS3";
var con  = e + "拥有很多新的特性," + f + "可以用于实现酷炫效果。";
console.log(con);

使用ES6的字符串模板：

var e = "HTML5";
var f = "CSS3";
var strs = `${e}拥有很多新的特性,${f}可以用于实现酷炫效果。`;
console.log(strs);

5. destructuring：变量解构

5.1 结构赋值的使用：

ES5的对象赋值：

let u = "H5";
let v = "CSS";
let objx = {html: u, css: v};
console.log(objx);

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

let html = "HTML5";
let css = "CSS3";
let objs = {html, css};
console.log(objs);

可以放过来书写：

let objy = {html: "H5", css: "CSS3"};
let {html, css} = objy;
console.log(html, css);

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

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

var name = 1;
var age = 2;
var sex = "sss";
var test = {
    name,
    age,
    [sex] : 3,
    // this指向改成了window
    log: (x) => {
        console.log(x, this);
    }
    // 这里的this指向test
    // log: function(x) {
    //     console.log(x, this);
    // }
}
test.log(2);
console.log(test);

总结

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