JavaScript進階知識點作用域詳解

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!

推薦閱讀: