技術文章 » JS執行機制及ES6

JS執行機制及ES6

2022-12-12 12:01:12

一、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的區別

區別 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程式碼。
    • 模板字串完全支援「運算」式的表示式，可以在${}裡完成一些計算。