是时候复习一下ES6了--声明用关键字篇

前言

说是ES6，主要是包含了ES6以及以后的全部的内容的学习和汇总。不按期更新文内容。如今开始吧。

正文

ES6之中，新的关键，新的概念为咱们的JS编写带来了更多的可能和更加优秀的性能。

1. let关键字：

• 用于生命变量，和var的区别在于申明变量的做用域，var声明的做用域是全局的，let申明的变量做用域是块级做用域。最主要的体现就在于循环之中，咱们须要经过循环基数（即index）来作些什么的时候，再使用var申明的时候咱们的经常使用自运行函数来解决这一问题，可是使用let以后，js会自动的帮咱们肯定当前循环的变量基数的运行区间，再也不会受到全局的影响。
• let再也不存在变量提高的现象，必须声明以后在使用。 这一效果的实现方式是展现性死区，再JS解析到当前代码段之中有经过let申明的变量，则再这一变量声明的代码真正执行以前的区域就是对应的死区，死区之中对于当前变量的使用都将会报错。若是再当前区域外经过var声明了全局变量，可是此区域之中有let声明的名称相同的变量则，这一变量再这一区域之中会被封锁，全局同名变量将会没有做用。
• 同一区域之中不能够声明相同名称的变量。

2. const：

• 声明常量内容，此类变量一旦声明，则不能够进行修改。const经过保证变量指向的内存区域的对应的数值的不变来达到这一效果的。因此咱们能够知道，基础数据类型的变量再声明以后是不能够改变的，可是对象类型的数据，咱们在声明以后，变量指向的内存区域数值其实是一个地址，因此咱们仍是能够改变对象之中的内容，可是不能够从新声明对象再赋值。若是想要声明的对象也是彻底不变的，能够经过Object.freeze方法，来彻底的冻结对象。

3. class：

• 为了缩小js与其余语言之中对象声明的差别，因此ES6之中新增长了class这个关键字。ES5之中咱们能够知道，都是申明一个函数而后经过prototype的内容赋值来实现对象构造函数的书写，ES6之中，为了更好的语义化当前的对象申明，咱们能够经过class class_Name{../}的形式来申明咱们对象内容，使用constructor关键字，来定义这一对象的构造方法，使用function_Name(arguments)的形式来声明对象的方法。方法之间是能够不须要逗号的。这样写实际上就相似于编写一个构造方法，而且再狗仔函数的prototype对象之上添加上咱们想要声明的方法。二者的效果是等价的。咱们能够看一段代码：

class Point{
      constructor(x){
        this.x = x;
      }
    
      toString(){
        console.log(this.x);
      }
    }
复制代码

• 声明类的时候其中的函数名称能够经过[变量]的形式来定义，最后当前的函数名称将会使用其中变量的值。
• 咱们能够再类的定义之中为变量设置set和get方法，经过使用这两个关键字内容。以下：

...
      get prop(){
        return this.prop;
      }
    
      set prop(newValue){
        this.prop = newValue;
      }
    ...
复制代码

• 咱们也能够经过new class {...}的写法来立刻创造一个匿名类的对象内容。以下：

let h = new class{
      constructor(x){
        this.x = x;
      }
    
      get prop(){
        return this.prop;
      }
    
      set prop(newValue){
        this.prop = newValue;
      }
    
      toString(){
        console.log(this.x);
      }
    }
复制代码

• 这样声明的类之中所有都是严格模式的。不须要明确的书写'use strict'。
• 不会有声明提早的状况发生，咱们必需要再使用以前就进行类的声明。
• 再class的函数声明的时候再前面添加*符号表示的时generator函数（这个概念将会再以后的新概念篇之中说明）
• 再使用类的声明的时候，若是咱们建立的对象使用结构赋值的方式将对象的方法单独获取出来，则要注意了，这个时候方法之中的this指针的指向会变化，会指向运行时上下文（因为严格模式的存在，因此this会时undefined）这点要特别的注意。
• 最后咱们说一下私有方法，在ES6之中并无对私有方法声明的关键字，因此**约定俗成，咱们经过_Name的形式来声明属性和方法。**固然私有属性的代表语法也已经在申请之中，经过#号标识的方式也已经在审核。

4.static

• 静态方法的声明，在类的方法前面我们使用static关键字的话，当前方法将会时静态的形式只有经过当前的类明来进行调用，有点相似于java之中的静态方法吧。
• 咱们来扒一扒静态方法的声明方式吧，当咱们声明类的时候，咱们其实是声明了一个构造方法对象，这个static关键字的效果，ES5之中咱们彻底能够经过方法对象添加属性的方式来模拟当前的static关键字。
• 当子类继承了父类以后，其实也继承了父类的静态函数，这一点要单独拿出来讲明是由于静态函数的特殊性。因此必须说明一下
• 咱们能够经过super关键字来调用父类的静态方法。
• static也能够修饰属性的，静态属性操做的方式实际上和静态方法相似的。

5. extends

• 类的继承,子类能够经过这个关键字直接继承父类的信息。
• 咱们都注意到constructor关键字，若是子类没有这一方法的话，将会直接继承父类的构造方法，若是写了构造方法的话，能够经过super关键字来进行调用父类的构造方法。
• 父类的静态方法和参数也会被子类继承的。
• 这里咱们顺带提一点，子类如何去肯定继承自哪一个父类呢，咱们能够经过Object.getPrototypeOf()方法来获取继承的父类。

6. super

• 其能够看成函数使用也是能够看成对象来使用的。当咱们在子类之中须要调用到父类的构造函数的时候，咱们能够直接经过使用super()来进行调用。可是咱们能够发现，super返回的内容实际上仍是子类的实例，因此咱们能够理解为其就至关于 父类.prototype.constructor.call(this) (子类实例)
• 除去在构造函数之中的做用意外，在类的通常方法之中，super指代的变成了父类的原型对象。即至关于父类.prototype了。
• 最后一种较为特殊的用法是在静态函数之中使用super。这个时候super至关于父类了。

7. import

• 模块化是一个十分重要的概念，可是JS之中一直没有引入模块话的形式，因此在ES6之中弥补了这一缺憾。ES6的模块话设计思想是尽可能的静态化，其模块不是对象，而是经过export来输出的代码，经过import能够对代码进行导入。因此ES6静态加载在编译的时候就已经肯定了，效率相对较高。可是这也致使了一个问题，咱们没有办法引用模块自己，只能引入咱们导出的内容，这是由于模块并非对象。看一下代码:

import { stat, exists, readFile } from 'fs';
复制代码

• 当咱们引入了相关的变量和方法的时候，若是咱们想要为这一方法或者变量换一个名称的话，咱们可使用as关键字，代码以下：

import { firstName, lastName, year } from './profile.js';
复制代码

• 说明一下映入的对应API的使用是须要注意，不能对其进行修改，不然将会报错。
• import 引入代码有提高性，其在编译的时候会自动的提高到代码头进行执行。
• import 因为是静态执行的因此其中不能含有任何的表达式。
• import会自动的执行导入的模块，若是咱们只是须要执行模块可是不须要导入任何的数据和方法的话，咱们可使用import '模块名'的形式来进行模块的调用。
• 当咱们须要导入模块之中全部的值的时候，可使用*号表示。代码以下：

import * from './profile.js'
复制代码

• 当export之中使用了default进行导出的时候，咱们能够不是用结构赋值的形式，而是直接的用自定义的名称还导出相关的模块数据。例如：

export default function(){
        ...
    }

    import checkAPI from "./xxx.js"
复制代码

8. export

• 相对应于import咱们也有导出使用的export内容。咱们能够直接在模块之中声明的变量前使用export来讲明当前的变量或者方法是须要导出的，或者咱们能够赞成的经过{变量名，方法名}的形式来进行内容的导出。
• 当咱们导出相关变量和方法的时候，其对应的名称就是咱们导出的变量的名称，或者想要叫别的名称的时候，能够经过使用as关键字来进行名称的修改。看一段代码：

function v1() { ... }
    function v2() { ... }
    
    export {
      v1 as streamV1,
      v2 as streamV2,
      v2 as streamLatestVersion
    };
复制代码

• export之中有一个default关键字，表示默认导出内容，default其实就能够当作当前导出数据的名称，只不过它是一个关键字而已，因此才会致使下面看起来有些奇异的使用方式：

export default function crc32() { // 输出
      // ...
    }
    
    export default 42;
    上面两种用法都是成立的。
复制代码

• 固然default也是能够用道别名的，或者单单表示默认输出代码段而已，代码以下：

var a = 1;
    export default a;
    
    function add(x, y) {
      return x * y;
    }
    export {add as default};
复制代码

• export有一种和import的符合用法 形如：export {a, b} from "./xxx.js"这种形式，代表的是先将a和b从xxx.js之中引入，在exoprt导出。可是这里有一点要注意的是，这种结合形式所书写的模块是没法使用a和b接口的。这种方式经常用于模块的继承编写。固然这种写法之中的接口名称也是能够经过as来设置别名的。

结束

上面介绍的都是声明使用的ES6新关键字（不管是声明变量，类仍是模块）了，以及相关性较强的一部分，在此处介绍了，以后可能仍是会有新的关键字出现，那些将会在介绍相关的ES6概念的时候来一同说明。本篇文章就到这吧，让咱们共同窗习，共同成长。