ES6/ES7语法及原理实现

ES6/ES7语法及原理实现

• let
  

首先我们来看看小例子，这样我们就知道差异了。

let name = 'zhangsan'

while (true) {
    let name = 'lisi'
    console.log(name)  //输出'lisi'
    break
}

console.log(name)  //'zhangsan'

从上例子中，我们就已经发现了let的好处，let仅仅是作用于它所在的作用域当中，并不会影响到除作用域外的范围。

• const
  

一般作用于值不变的变量，也称之为常量；

const PI = Math.PI; // 圆周率
PI = 100;   //  报错

• class
  ES6提供了更接近传统语言的写法，引入了Class（类）这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法，也更加通俗易懂。

class Parent {
    constructor(){
        this.name = '爸爸';
    }
    doing(){
        console.log('我会赚钱');
    }
}

class Child extends Parent{
    constructor(){
        super();
        this.name = '儿子';
    }
}

let person = new Child();
person .doing();//  我会赚钱

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

Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。上面定义了一个Cat类，该类通过extends关键字，继承了Parent类的所有属性和方法。

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

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

• arrow function (箭头函数 =>)

这是应该是ES6最常用的一个新特性了，箭头函数的初衷其实是为了对this的引用，废话不多说，我们看看例子就知道如何用了。

function count(i){
    return i*i;
}

let count = (i) => i*i;

• Destructuring(解构)

一般被称之为解构，主要作用于变量的赋值。

var cat = '猫',
    dog = '狗';

var animal = {
    'cat':cat,
    'dog':dog
}

let cat = '猫',
    dog = '狗';

let animal = {cat,dog};