【6】JavaScript 函數(shù)高級——執(zhí)行上下文與執(zhí)行上下文棧、變量提升（圖解+典型實(shí)例分析）

niuxiaowei111 發(fā)布于2019-08-23 17:19 / 3038人閱讀

摘要：函數(shù)和變量相比，會被優(yōu)先提升。這意味著函數(shù)會被提升到更靠前的位置。僅提升聲明，而不提升初始化。

JavaScript 函數(shù)高級——執(zhí)行上下文與執(zhí)行上下文棧（圖解+典型實(shí)例分析） 變量提升與函數(shù)提升

變量聲明提升

通過 var 定義（聲明）的變量，在定義語句之前就可以訪問到

值：undefined

/*
  面試題 : 輸出 undefined
   */
var a = 3
function fn() {
    console.log(a) // undefined  調(diào)用fn()后進(jìn)入函數(shù)體內(nèi)部，通過 var 聲明的變量提升，值為undefined
    var a = 4
    console.log(a) // 4
}
fn()
console.log("----")

可以用開發(fā)工具的代碼調(diào)試工具設(shè)置斷點(diǎn)，清楚地看到a的值的變化。

函數(shù)聲明提升

通過 function 聲明的函數(shù)，在該函數(shù)聲明之前就可以直接調(diào)用

值：函數(shù)定義（對象）

console.log(b) // undefined  通過 var 聲明的變量b         變量聲明提升
fn2() // fn2()               通過 function 聲明的函數(shù)fn2  函數(shù)聲明提升
fn3() // 報錯                 通過 var 聲明的函數(shù)fn3       變量聲明提升

var b = 3
function fn2() {
  console.log("fn2()")
}

var fn3 = function () {
  console.log("fn3()")
}

?。∽⒁?var a = 3， var fn = function(){ }只要是var聲明的，都是變量聲明提升,值都是undefined

！！注意：var fn = function(){ }屬于變量聲明提升，不是函數(shù)聲明提升

問題：變量提升和函數(shù)提升是如何產(chǎn)生的？

這是因?yàn)樵贘avaScript中執(zhí)行上下文的工作方式造成的。
函數(shù)和變量相比，會被優(yōu)先提升。這意味著函數(shù)會被提升到更靠前的位置。
JavaScript 僅提升聲明，而不提升初始化。

執(zhí)行上下文

執(zhí)行上下文個數(shù) = n(調(diào)用的函數(shù)個數(shù)) + 1(全局執(zhí)行上下文)

// 變量聲明提升，函數(shù)聲明提升，全局代碼的函數(shù)和方法添加為Window的方法和屬性
console.log(a1, window.a1) // undefined   undefined
window.a2() // a2()
console.log(this) // Window

var a1 = 3
function a2() {
    console.log("a2()")
}
console.log(a1) // 3

代碼分類（位置）

全局代碼

函數(shù)代碼

全局執(zhí)行上下文

在執(zhí)行全局代碼前將window確定為全局執(zhí)行上下文

對全局數(shù)據(jù)進(jìn)行預(yù)處理：

var 定義的全局變量==>undefined，添加為window屬性

function 聲明的全局函數(shù)==>賦值(fun)，添加為window的方法

this==>賦值(window)

開始執(zhí)行全局代碼

函數(shù)執(zhí)行上下文

在調(diào)用函數(shù)，準(zhǔn)備執(zhí)行函數(shù)體之前，創(chuàng)建對應(yīng)的函數(shù)執(zhí)行上下文對象

對局部數(shù)據(jù)進(jìn)行預(yù)處理

形參變量==>賦值（實(shí)參）==>添加為執(zhí)行上下文的屬性

arguments==>賦值（實(shí)參列表），添加為執(zhí)行上下文的屬性

var 定義的局部變量==>undefined==>添加為執(zhí)行上下文的屬性

function聲明的函數(shù)==>賦值（fun）==>添加為執(zhí)行上下文的屬性

this==>賦值（調(diào)用函數(shù)的對象）

開始執(zhí)行函數(shù)體代碼

執(zhí)行上下文棧 理解

在全局代碼執(zhí)行前, JS引擎就會創(chuàng)建一個棧來存儲管理所有的執(zhí)行上下文對象

在全局執(zhí)行上下文(window)確定后, 將其添加到棧中(壓棧)

在函數(shù)執(zhí)行上下文創(chuàng)建后, 將其添加到棧中(壓棧)

在當(dāng)前函數(shù)執(zhí)行完后,將棧頂?shù)膶ο笠瞥?出棧)

當(dāng)所有的代碼執(zhí)行完后, 棧中只剩下window

流程分析

// 1. 進(jìn)入全局上下文
var a = 10
var bar = function (x) {
    var b = 5
    // 3. 進(jìn)入foo執(zhí)行上下文
    foo(x + b)
}
var foo = function (y) {
    var c = 5
    console.log(a + c + y)
}
// 2. 進(jìn)入bar函數(shù)執(zhí)行上下文
bar(10)  // 30

用斷點(diǎn)調(diào)試工具查看執(zhí)行上下文調(diào)用棧

面試題 題1：遞歸調(diào)用的執(zhí)行上下文

console.log("gb: " + i)  
var i = 1
foo(1)
function foo(i) {
    if (i == 4) {
        return
    }
    console.log("fb:" + i)
    foo(i + 1) //遞歸調(diào)用: 在函數(shù)內(nèi)部調(diào)用自己
    console.log("fe:" + i)
}
console.log("ge: " + i) // ge:1

依次輸出什么?

整個過程中產(chǎn)生了幾個執(zhí)行上下文?

5個 = 4個函數(shù)執(zhí)行上下文 + 1個全局執(zhí)行上下文

調(diào)試查看：

題2：函數(shù)提升優(yōu)先于變量提升，且不會被變量聲明覆蓋，但是會被變量賦值覆蓋。

console.log(foo)  // ? foo() {console.log("函數(shù)聲明")}
console.log(foo()) // 我是一個函數(shù)  undefined
function foo() {
  console.log("我是一個函數(shù)")
}
var foo = 3
console.log(foo) // 3
console.log(foo()) // foo is not a function

相當(dāng)于

function foo(){
    console.log("函數(shù)聲明")
}  // 函數(shù)聲明先提升
var foo   // 變量聲明提升，變量初始化未提升，此時foo的值為undefined，所以不會覆蓋函數(shù)聲明
console.log(foo)  // 打印出? foo() {console.log("函數(shù)聲明")}
console.log(foo()) // 我是一個函數(shù)  undefined
foo = 3 // 此時給foo賦值為3，則會覆蓋前面的
console.log(foo) // 3
console.log(foo()) // foo is not a function，因?yàn)榇藭rfoo=3

題3：考察全局環(huán)境下的變量提升

if (!(t in window)) {
    var t = 1
}
console.log(t)  // undefined

t in window
// true

原因就在于變量t被提升到了全局環(huán)境最頂部，通過關(guān)鍵字var在全局作用域中聲明的變量將作為全局對象（window）的一個屬性，上面的代碼JavaScript其實(shí)是這樣解析的：

var t
if (!(t in window)) {
    var t = 1
}
console.log(t) // undefined

題4（好題）

var c = 1
function c(c) {
  console.log(c)
  var c = 3
}
c(2) // 報錯  c is not a function

注意：函數(shù)提升為c()，整個函數(shù)提升，所以上面的代碼相當(dāng)于下面這樣，這樣就很清楚了吧！

function c(c) {
    console.log(c)
    var c = 3
}
var c

c = 1
c(2) //所以 c is not a function

函數(shù)體內(nèi)的代碼根本就沒機(jī)會執(zhí)行。

GPU云服務(wù)器云服務(wù)器執(zhí)行上下文上下文棧 javascript執(zhí)行函數(shù) nlp高級執(zhí)行師

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/104157.html

發(fā)表評論

登陸后可評論

0條評論

niuxiaowei111

男|高級講師

我要關(guān)注我要私信

TA的文章

Go語言核心36講（Go語言實(shí)戰(zhàn)與應(yīng)用八）--學(xué)習(xí)筆記

閱讀 2262·2021-11-19 09:55
我用Python爬取了女神視界，爬蟲之路永無止境「內(nèi)附源碼」

閱讀 2741·2021-11-11 16:55
Python表白代碼：太秀了，用過的人都找到了對象...【滿屏玫瑰盛開！】

閱讀 3275·2021-09-28 09:36
虛擬主機(jī)能承受多少ip-虛擬主機(jī)有什么優(yōu)勢嗎？

閱讀 2054·2021-09-22 16:05
【譯】Vertical-Align: All You Need To Know

閱讀 3414·2019-08-30 15:53
上下高度固定（100px），中間自適應(yīng)

閱讀 1868·2019-08-30 15:44
css選擇器和jQuery選擇器

閱讀 3004·2019-08-29 13:10
? Emoji ? - 收藏集 - 掘金

閱讀 1435·2019-08-29 12:30

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

【6】JavaScript 函數(shù)高級——執(zhí)行上下文與執(zhí)行上下文棧、變量提升（圖解+典型實(shí)例分析）

相關(guān)文章

**《javascript高級程序設(shè)計》筆記：內(nèi)存與執(zhí)行環(huán)境**

**【進(jìn)階1-2期】JavaScript深入之執(zhí)行上下文棧和變量對象**

**【進(jìn)階1-1期】理解JavaScript 中的執(zhí)行上下文和執(zhí)行棧**

**【進(jìn)階1-3期】JavaScript深入之內(nèi)存空間詳細(xì)圖解**

**【進(jìn)階2-2期】JavaScript深入之從作用域鏈理解閉包**

發(fā)表評論

0條評論

niuxiaowei111

男|高級講師

TA的文章

Go語言核心36講（Go語言實(shí)戰(zhàn)與應(yīng)用八）--學(xué)習(xí)筆記

我用Python爬取了女神視界，爬蟲之路永無止境「內(nèi)附源碼」

Python表白代碼：太秀了，用過的人都找到了對象...【滿屏玫瑰盛開！】

虛擬主機(jī)能承受多少ip-虛擬主機(jī)有什么優(yōu)勢嗎？

【譯】Vertical-Align: All You Need To Know

上下高度固定（100px），中間自適應(yīng)

css選擇器和jQuery選擇器

? Emoji ? - 收藏集 - 掘金

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

【6】JavaScript 函數(shù)高級——執(zhí)行上下文與執(zhí)行上下文棧、變量提升（圖解+典型實(shí)例分析）

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

【6】JavaScript 函數(shù)高級——執(zhí)行上下文與執(zhí)行上下文棧、變量提升（圖解+典型實(shí)例分析）