是時候複習一下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概念的時候來一同說明。本篇文章就到這吧，讓咱們共同窗習，共同成長。