JavaScript進(jìn)階講解一

接下來，我會給大家講解js中讓人讓人迷惑的知識點，比如： 作用域、函數(shù)、閉包、面向?qū)ο?、ES新特性、事件循環(huán)、微任務(wù)、宏任務(wù)、內(nèi)存管理、Promise、await、 asnyc、防抖、節(jié)流等等。

一、瀏覽器的內(nèi)核

1.常見的瀏覽器內(nèi)核

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

二、JavaScript引擎

2.1.為什么需要JavaScript引擎？

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

2.2.常見的JavaScript引擎

SpiderMonkey、Chakra、JavaScriptCore、V8... 現(xiàn)使用最多的是v8引擎

三、V8引擎

3.1.官方定義

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

3.2.解析過程圖示

四、JS的執(zhí)行過程

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

4.1 普通代碼執(zhí)行

其實在GEC開始執(zhí)行代碼后 如果只是一些變量，還是很好理解的，比如

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

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

4.1 函數(shù)如何執(zhí)行？

如果我們執(zhí)行時遇到函數(shù)怎么辦呢？

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

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

五、作用域提升理解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()

第一個大家應(yīng)該都知道，所以不贅述，我們主要來看看為什么第二個打印的是undefined?？聪聢D可得，在編譯時，我們的函數(shù)會指向一個內(nèi)存地址，開辟一個空間（AO），所以代碼執(zhí)行時，他會在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()

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

大家來思考下下面這個會是什么呢？

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

到此這篇關(guān)于JavaScript進(jìn)階講解一作用域的文章就介紹到這了,更多相關(guān)js作用域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論