JS執行機制及ES6

不見水星記發表於2022-12-12
JS

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

相關文章