JS執行機制及ES6

一、JS執行機制

• JS語言有個特點是單線程，即同一時間只能做一件事。單線程就意味著，所有的任務需要排隊，前一個任務結束，才會執行後一個任務，可能造成頁面渲染不連貫。

• 為瞭解決這個問題，利用多核CPU的計算能力，允許JS腳本創建多個線程，即同步和非同步。

• 同步任務：

  • 同步任務都在主線程上執行，形成一個執行棧。
  • 前一個任務結束後再去執行下一個任務，程式的執行順序與任務的排列順序是一致的同步的。
  • 比如做飯的同步做法，我們要燒水煮飯，等水開了，再去切菜，炒菜。

• 非同步任務：

  • 通過回調函數實現的，非同步任務相關回調函數添加到任務隊列中(任務隊列也稱為消息隊列)。

  • 在做一件事的同時，還可以去處理其他的事情。

  • 比如做飯的非同步做法，在燒水的同時，利用這段時間，去切菜，炒菜。

    • 非同步任務分類：
      • 1.普通事件，如click、resize等。
      • 2.資源載入，如load、error等。
      • 3.定時器，包括setTimeout、setInterval等。

• 同步和非同步本質的區別：在這條"流水線"上各個流程的執行順序不同。

• JS執行機制步驟：

  • 由於主線程不斷地重覆獲得任務、執行任務、再獲取任務、再執行，所以這種機制被稱為事件迴圈，即event loop。

  • 先執行執行棧中的同步任務。

  • 然後非同步任務(回調函數)放任務隊列中。

  • 一旦執行棧中的所有同步任務執行完畢，系統就會按照次序讀取任務隊列中的非同步任務，於是被讀取的非同步任務結束等待狀態，進入執行棧，開始執行。
    

二、ES6概述

• 新增了變數的聲明方式、解構賦值、模板字元串、簡化對象寫法、箭頭函數、函數形參預設值、rest參數、拓展運算符、新增數據類型（Set、Map、Symbol、BigInt）、promise、async/await等。

三、var、let、const的區別

四、箭頭函數與普通函數的區別

• 箭頭函數比普通函數更加簡潔
  • 如果只有一個參數，可以省去參數的括弧。
  • 如果函數體的返回值只有一句，可以省略大括弧，且必須省略return。
• 箭頭函數沒有自己的this
  • 箭頭函數不會創建自己的this， 所以它沒有自己的this，它只會在自己作用域的上一層繼承this。所以箭頭函數中this的指向在它在定義時已經確定了，之後不會改變。
• call()、apply()、bind()等方法不能改變箭頭函數中this的指向
  • 箭頭函數的this指向要麼是window，要麼是它的外層。
• 箭頭函數不能作為構造函數使用
  • 箭頭函數是ES6中的提出來的，它沒有prototype，也沒有自己的this指向，更不可以使用arguments參數，所以不能New一個箭頭函數；new操作符的實現步驟如下：
    • 1.創建一個對象
    • 2.將構造函數的作用域賦給新對象（也就是將對象的proto屬性指向構造函數的prototype屬性）
    • 3.指向構造函數中的代碼，構造函數中的this指向該對象（也就是為這個對象添加屬性和方法）
    • 4.返回新的對象，所以，上面的第二、三步，箭頭函數都是沒有辦法執行的
• 箭頭函數沒有自己的arguments
  • 箭頭函數沒有自己的arguments對象。在箭頭函數中訪問arguments實際上獲得的是它外層函數的arguments值。
• 箭頭函數沒有prototype
• 箭頭函數不能用作Generator函數，不能使用yield關鍵字

五、箭頭函數的this指向

• 箭頭函數不同於傳統JavaScript中的函數，箭頭函數並沒有屬於⾃⼰的this，它所謂的this是捕獲其所在上下⽂的 this 值，作為⾃⼰的 this 值，並且由於沒有屬於⾃⼰的this，所以是不會被new調⽤的，這個所謂的this也不會被改變。箭頭函數的this指向外層函數的this。

六、擴展運算符的作用及使用場景

• 對象擴展運算符
  • 對象的擴展運算符(...)用於取出參數對象中的所有可遍歷屬性，拷貝到當前對象之中。擴展運算符對對象實例的拷貝屬於淺拷貝。
• 數組擴展運算符
  • 數組的擴展運算符可以將一個數組轉為用逗號分隔的參數序列，且每次只能展開一層數組。

七、對象與數組的解構

• 解構是 ES6 提供的一種新的提取數據的模式，這種模式能夠從對象或數組裡有針對性地拿到想要的數值。
• 對象的解構
  • 在解構對象時，是以屬性的名稱為匹配條件，來提取想要的數據的。
• 數組的解構
  • 在解構數組時，以元素的位置為匹配條件來提取想要的數據的。

八、模板語法

• 允許用${}的方式嵌入變數，優勢有兩個：
  • 在模板字元串中，空格、縮進、換行都會被保留，可以識別html代碼。
  • 模板字元串完全支持“運算”式的表達式，可以在${}里完成一些計算。