JavaScript進(jìn)階講解一

接下來(lái)，我會(huì)給大家講解js中讓人讓人迷惑的知識(shí)點(diǎn)，比如： 作用域、函數(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的一個(gè)分支，Google開發(fā)，目前應(yīng)用于Google Chrome、Edge、Opera等。

二、JavaScript引擎

2.1.為什么需要JavaScript引擎？

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

2.2.常見的JavaScript引擎

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

三、V8引擎

3.1.官方定義

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

3.2.解析過(guò)程圖示

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

• 初始化全局對(duì)象（GO -》 Global Object）： js引擎在執(zhí)行代碼之前，會(huì)在堆內(nèi)存中創(chuàng)建一個(gè)全局對(duì)象，將window屬性指向自己，也會(huì)將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），也就是說(shuō)GEC 會(huì)被放到ECS中執(zhí)行
• GEC（這里面就有VO，這里指向GO）被放入到ECS中
• GEC開始執(zhí)行代碼（從上往下依次執(zhí)行）

4.1 普通代碼執(zhí)行

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

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

這里為什么不報(bào)錯(cuò) 而是undefined，其實(shí)我們上面已將說(shuō)的很明白了，因?yàn)樵趧?chuàng)建GO對(duì)象的時(shí)候 我們定義的全局變量會(huì)被添加到GO中 且值是undefined。這也是var的作用域提升。

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

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

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

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

第一個(gè)大家應(yīng)該都知道，所以不贅述，我們主要來(lái)看看為什么第二個(gè)打印的是undefined。看下圖可得，在編譯時(shí)，我們的函數(shù)會(huì)指向一個(gè)內(nèi)存地址，開辟一個(gè)空間（AO），所以代碼執(zhí)行時(shí)，他會(huì)在AO中查找，找不到會(huì)在上一級(jí)查找（作用域鏈）

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()

我們?cè)趤?lái)看這兩個(gè)，相信大家已經(jīng)明白了第一個(gè)輸出的原因，我們?cè)賮?lái)看看第二個(gè)為什么是100，而不是undefined，其實(shí)這個(gè)原因很簡(jiǎn)單，他就是作用域鏈，很明顯我們的AO中沒有a的定義，所以他會(huì)在上一層中找， 而這里的上一層就是GO，此時(shí)GO中的a已經(jīng)是100了 所以找到的a就是100。

大家來(lái)思考下下面這個(gè)會(huì)是什么呢？

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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論