ES6

模組化

• 語法（詳見上一篇）
  import export（注意有無default的區別）
• 環境
  使用babel編譯ES6語法，模組化工具使用webpack和rollup

Class

基本語法

//建構函式
    function MathHandle(x,y) {
        this.x = x;
        this.y = y;
    }
    MathHandle.prototype.add = function () {
        return this.x + this.y;
    }
    const m = new MathHandle(1,2);
    alert(m.add())

//class
    class MathHandle {
        constructor(x,y){
            this.x = x;
            this.y = y;
        }
        add(){
            return this.x + this.y
        }
    }
    const m = new MathHandle(1,2);
    alert(m.add())
 

class的本質是一個語法糖，是建構函式的另一種寫法，只是這種寫法更偏向於傳統的面嚮物件語言的語法。
typeof MathHandle //function
class的資料型別就是函式
MathHandle === MathHandle.prototype.constructor
類本身就指向建構函式
m._proto_ === MathHandle.prototype //true
例項物件的__proto__屬性值也指向類的prototype屬性值

繼承

Class之間可以通過extends關鍵字實現繼承，子類必須在constructor方法中呼叫super方法，表示父類的建構函式，否則新建例項時會報錯。這是因為子類沒有自己的this物件，而是繼承父類的this物件，然後對其進行加工。如果不呼叫super方法，子類就得不到this物件。

//使用建構函式實現繼承
    function Animal(name){
        this.name = name;
        this.eat = function () {
            console.log(this.name+'eat')
        }
    }
    function Dog(name) {
        this.name = name;
        this.bark = function () {
            console.log(this.name+'汪汪汪！')
        }
    }
    Dog.prototype = new Animal(name)
    const hashiqi = new Dog('哈士奇')
    hashiqi.bark()
    hashiqi.eat()
    //class實現繼承
    class Animal {
        constructor(name){
            this.name = name
        }
        eat(){
            console.log(this.name+'eat')
        }
    }
    class Dog extends Animal {
        constructor(name){
            super(name);
            this.name = name
        }
        bark(){
            console.log(this.name+'汪汪汪')
        }
    }
    const hashiqi = new Dog('哈士奇')
    hashiqi.bark()
    hashiqi.eat()
 

Promise

Promise詳解
Promise 是非同步程式設計的一種解決方案，其實是一個建構函式，自己身上有all、reject、resolve這幾個方法，原型上有then、catch等方法。
Promise物件有以下兩個特點:
(1)物件的狀態不受外界影響。Promise物件代表一個非同步操作，有三種狀態，pending(進行中)，fulfilled(已成功)，rejected(已失敗)。只有非同步操作的結果能決定當前當前是哪一種狀態，任何其他操作都無法改變這個狀態。
(2)一旦狀態改變就不會再變，任何時候都可以得到這個結果。Promise物件狀態的改變只有兩種可能，一種是從pending變為fulfilled，一種是從pending變成rejected，只要這兩種情況發生，狀態就凝固了，不會在改變了，會一直保持這個結果，這時就稱為resolved（已定型）。
注意：當我們new了一個Promise物件，但並沒有呼叫它，傳進去的函式也會執行，所以我們用Promise的時候一般是包在一個函式中，在需要的時候去執行這個函式。

• resolve方法的作用是，將Promise物件的狀態從“進行中”變為“已成功”，在非同步操作成功時呼叫，並將非同步操作的結果，作為引數傳遞出去；
• reject方法的作用是，將Promise物件的狀態從“進行中”變成“已失敗”，在非同步操作失敗時呼叫，並將非同步操作的報錯資訊，作為引數傳遞出去；
• Promise例項生成後，使用then方法分別指定成功和失敗的回撥函式
• catch方法是用來捕獲異常的，與try catch類似，也就是和then方法中接收的第二引數reject的回撥是一樣的，它還有另外一個作用：在執行resolve的回撥（也就是上面then中的第一個引數）時，如果丟擲異常了，那麼並不會報錯卡死js，而是會進到這個catch方法中。
• all方法，該方法提供了並行執行非同步操作的能力，並且在所有非同步操作執行完後並且執行結果都是成功的時候才執行回撥。all接收一個數組引數，這組引數為需要執行非同步操作的所有方法。
• race方法，與all方法不同的是誰先執行完成就先執行回撥。先執行完的不管是進行了race的成功回撥還是失敗回撥，其餘的將不會再進入race的任何回撥

其他常用功能

• let/const
• 模板字串
  傳統的javascript，輸出模板通常是這樣寫的

var name = "Jack",age = 20,html = ""
html+='<div>'
html+='<p>'+name+'</p>'
html+='<p>'+age+'</p>'
html+='</div>'

ES6寫法

const name = "Jack",age = 20
const html = `
<div>
  <p>${name}<p>
  <p>${age}</p>
</div>

模板字串使用反引號（`）包裹起來，如果需要嵌入變數，將變數名寫在${}之中

• 解構賦值
  通過解構賦值，可以將物件的屬性或陣列的值取出來，賦值給其他變數。
  賦值的兩邊具有相同的結構，就可以正確取出陣列的元素或物件裡面的屬性值
  注意：解構物件時，如果進行無申明賦值，賦值語句要用（）包起來
• 塊級作用域
• 函式預設引數
  允許為函式的引數設定預設值，直接寫在引數定義的後面。
• 擴充套件運算子
  ... 可以將一個數組轉為用逗號分隔的引數序列
• 箭頭函式
  適用於那些本來需要匿名函式的地方。把function變成了箭頭，語法是引數，箭頭，函式體，當只有一個引數時，圓括號是可以省略的，多個引數或沒有引數都不能省略圓括號。當箭頭函式的函式體只有一條 return 語句時，可以省略 return 關鍵字和方法體的花括號。箭頭函式不會建立自己的this,它只會從自己的作用域鏈的上一層繼承this。

非同步

• js單執行緒
  原因：為了避免DOM渲染的衝突
• event-loop
  主執行緒從"任務佇列"中讀取執行事件，這個過程是迴圈不斷的，這個機制被稱為事件迴圈。
• JavaScript的執行機制
  （1）所有同步任務都在主執行緒上執行
  （2）非同步任務先放到非同步佇列中，（如果是setTimeout不設定延時，立刻放到非同步佇列中，如果設定了延時時間，延時結束後放到非同步佇列中，ajax請求載入完成後再放到非同步佇列中）
  （3）主執行緒任務執行完成後，看非同步佇列裡有沒有等待執行的任務，如果有就拿到主執行緒中執行
  （4）不斷重複第三步操作