ES6学习笔记<一> let const class extends super

学习参考地址1   学习参考地址2

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015；也就是说，ES6就是ES2015。

let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments 这些是ES6最常用的几个语法，基本上学会它们，我们就可以走遍天下都不怕啦！

let

let 用法与 var 类似用来声明变量，但var声明的变量影响全局或函数，一下案例中var就显得不那么好用；

    var val = "a";
    while(true){
        var val = "b";
        console.log(val);    // b
        break;
    }
    console.log(val);    // b

两个 val 都输出b，之前赋值的 val = “a” 则直接被while块中的赋值覆盖了。

    var val = "a";
    while(true){
        let val = "b";
        console.log(val);    // b
        break;
    }
    console.log(val);    // a    

新引进的 let 则只影响块级作用域，这样可以很好的避免变量被覆盖问题。

再看一个 for 循环的例子。

    var arr = [];
    for (var i = 0; i < 7; i++) {
        arr[i] = function(){ return i + 1; };
    }
    console.log(arr[4]());   // 8
    console.log(arr[0]());   // 8

这里 i 的值影响全局，每次循环后都去覆盖前一次的值，所有最后不论取哪个下标结果都是8。

    var arr = [];
    for (let i = 0; i < 7; i++) {
        arr[i] = function(){ return i + 1; };
    }
    console.log(arr[4]());    // 5
    console.log(arr[0]());    // 1

用 let 后 i 的值仅在一次循环中生效，不会再去覆盖之前的值。

再来引用一个实际开发中非常常见的例子

var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){
    clickBoxs[i].onclick = function(){
        console.log(i)
    }
}

我们本来希望的是点击不同的clickBox，显示不同的i，但事实是无论我们点击哪个clickBox，输出的都是5。

没有 let 时我们一般采用闭包来解决这类问题

function iteratorFactory(i){
    var onclick = function(e){
        console.log(i)
    }
    return onclick;
}
var clickBoxs = document.querySelectorAll('.clickBox')
for (var i = 0; i < clickBoxs.length; i++){
    clickBoxs[i].onclick = iteratorFactory(i)
}

有 let 后，解决这类问题就不需要再用闭包来做了。

 

const

这个和很多服务器端语言一样表示常量，一旦定义赋值不可再修改。

    const MyName = "miragefox";
    MyName += "a";    // Uncaught TypeError: Assignment to constant variable.

常量定义后 一旦修改浏览器直接报错。const 在实际开发中用来定义 始终恒定的量，可以有效避免因无修改导致的迷之bug。

 

class   extends   super

这三个关键字的出现非常友好的解决了 原型(类) 继承 构造 这是js oop的一大进步，阅读书写起来都特别舒服了，先看个例子：

    // 创建对象
    class People{
        constructor(name){
            this.eyeNum = 2;
            this.mouthNum = 1;
            this.headNum = 1;
            this.name = name;
        }
        sayHello(language){
            switch(language){
                case "中文":
                console.log("你好，我是" + this.name + "，我今年" + this.age + "岁。");
                break;
                case "English":
                console.log("Hello，I'm " + this.name);
                break;
            }
        }
    };
    class Chinese extends People { 
        constructor(name,age){
            super(name);
            this.age = age;
        }
    };
    // 实例化对象
    let p = new People("Zero");
    p.sayHello("English");    // Hello，I'm Zero
    let XiaoM = new Chinese("小明",18);
    XiaoM.sayHello("中文");    // 你好，我是小明，我今年18岁。

这个例子看起来有点复杂，其实仔细调试下就发现 这个例子正好把 子类继承原型类(父类) 还有构造函数 都诠释了一遍。

引用参考资料的话来解释这三个关键字。

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

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

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

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

P.S 如果你写react的话，就会发现以上三个东西在最新版React中出现得很多。创建的每个component都是一个继承React.Component的类。详见react文档

 

 

ES6学习笔记目录

ES6学习笔记<一> let const class extends super

ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

ES6学习笔记<三> 生成器函数与yield

ES6学习笔记<四> default、rest、Multi-line Strings

ES6学习笔记<五> Module的操作——import、export、as