JavaScript進階知識點作用域詳解

Posted on by

JavaScript進階講解一

接下來，我會給大傢講解js中讓人讓人迷惑的知識點，比如： 作用域、函數、閉包、面向對象、ES新特性、事件循環、微任務、宏任務、內存管理、Promise、await、 asnyc、防抖、節流等等。

一、瀏覽器的內核

1.常見的瀏覽器內核

Gecko：早期被Netscape和Mozilla Firefox瀏覽器瀏覽器使用。 Trident：微軟開發，被IE4~IE11瀏覽器使用。 Webkit：蘋果基於KHTML開發、開源的，用於Safari，Google Chrome之前也在使用。 Blink：是Webkit的一個分支，Google開發，目前應用於Google Chrome、Edge、Opera等。

二、JavaScript引擎

2.1.為什麼需要JavaScript引擎？

高級的編程語言都是需要轉成最終的機器指令來執行，我們編寫的JavaScript無論你交給瀏覽器或者Node執行，最後都是需要被CPU執行，但是CPU隻認識自己的指令集，也就是所謂的機器語言，才能被CPU所執行，所以我們需要JavaScript引擎幫助我們將JavaScript代碼翻譯成CPU指令來執行。

2.2.常見的JavaScript引擎

SpiderMonkey、Chakra、JavaScriptCore、V8… 現使用最多的是v8引擎

三、V8引擎

3.1.官方定義

  • V8是用C ++編寫的Google開源高性能JavaScript和WebAssembly引擎，它用於Chrome和Node.js等。
  • 它實現ECMAScript和WebAssembly，並在Windows 7或更高版本，macOS 10.12+和使用x64，IA-32， ARM或MIPS處理器的Linux系統上運行。
  • V8可以獨立運行，也可以嵌入到任何C ++應用程序中。

3.2.解析過程圖示

四、JS的執行過程

  • 初始化全局對象（GO -》 Global Object）： js引擎在執行代碼之前，會在堆內存中創建一個全局對象，將window屬性指向自己，也會將Date、Array、String、Number、setTimeout、和你自己定義的全局變量這些放到GO中（當然你自己定義的還未執行 所以值是underfind）（這也是為什麼我們可以使用window.及Data這些函數或類的原因）
  • 執行上下文棧（ECS -》Execution Context Stack）： 它是用於執行代碼的調用棧，執行的是全局的代碼塊（GEC -》 Global Execution Context），也就是說GEC 會被放到ECS中執行
  • GEC（這裡面就有VO，這裡指向GO）被放入到ECS中
  • GEC開始執行代碼（從上往下依次執行）

4.1 普通代碼執行

其實在GEC開始執行代碼後 如果隻是一些變量，還是很好理解的，比如

console.log(a); // undefined
var a = 100

這裡為什麼不報錯 而是undefined，其實我們上面已將說的很明白瞭，因為在創建GO對象的時候 我們定義的全局變量會被添加到GO中 且值是undefined。這也是var的作用域提升。

4.1 函數如何執行？

如果我們執行時遇到函數怎麼辦呢？

foo()
function foo() {
  console.log(100);
}
// foo()

看上面函數 不論我們foo在哪裡調用 他都是可以正確執行的。而不會和變量那樣顯示 undefined或者報錯，這是為什麼呢？ 其實在GO創建時（編譯時，代碼還未開始執行），當他遇到有函數的定義時，就會根據函數體創建一個函數執行上下文（FEC，在這裡也會有個VO，這裡的VO指向AO）並且壓入到ESC中，存的是一個內存地址，不在是undefined。 所以當代碼開始執行時 執行到foo()時，他就能在GO中找到那個內存地址

五、作用域提升理解undefined

var n = 100
function foo() {
   n = 200
}
foo()
console.log(n); // 200
var n = 100
function foo() {
  console.log(n); // undefined
  return
  var n = 200
 }
 foo()

第一個大傢應該都知道，所以不贅述，我們主要來看看為什麼第二個打印的是undefined。看下圖可得，在編譯時，我們的函數會指向一個內存地址，開辟一個空間（AO），所以代碼執行時，他會在AO中查找，找不到會在上一級查找（作用域鏈）

function foo() {
      console.log(a);// undefined
      var a = 100
      console.log(a);// 100
    }
    var a = 100
    foo()
function foo() {
      console.log(a);// 100
    }
    var a = 100
    foo()

我們在來看這兩個，相信大傢已經明白瞭第一個輸出的原因，我們再來看看第二個為什麼是100，而不是undefined，其實這個原因很簡單，他就是作用域鏈，很明顯我們的AO中沒有a的定義，所以他會在上一層中找， 而這裡的上一層就是GO，此時GO中的a已經是100瞭 所以找到的a就是100。

大傢來思考下下面這個會是什麼呢？

var a = 1
    function foo1() {
      console.log(a);
    }
    function foo2() {
      var a = 2
      console.log(a);
      foo1()
    }
    foo2()
    console.log(a);

到此這篇關於JavaScript進階講解一作用域的文章就介紹到這瞭,更多相關js作用域內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：