JS 提升如何在函數中工作？

Question

有人可以向我解釋為什么 (1) 返回11而 (2) 返回undefined 。 function 塊/聲明對吊裝的影響是什么？

 // (1) var boo = 11 console.log(boo) // 11 var boo = 10

 // (2) var boo = 11 function foo() { console.log(boo) var boo = 10 } foo() // undefined

Answer 1

JavaScript 在函數內提升意味着變量的聲明被移動到 function 塊的頂部。 當您輸入foo()時， var boo會立即重新聲明，即使您尚未到達它（因為 JS 引擎知道該聲明存在於函數中）。 因此，它未定義的原因是因為它只是被聲明了，直到下一行才賦值。

實際上，如果您在適當的 scope 中聲明變量並且不重新聲明具有相同名稱的變量，那么您不應該遇到這種情況，但我理解您的好奇心。

您可以在此處閱讀有關此內容的更多信息。

Answer 2

var聲明（與let相反）總是在其塊的頂部完成，這意味着：

var boo = 11
function foo() {
   console.log(boo)
   var boo = 10
}
foo()

等於

var boo = 11
function foo() {
   var boo // undefined
   console.log(boo)
   boo = 10 // 10
}
foo()

Answer 3

提升發生在每個執行上下文中。 在提升變量或 function 聲明期間沒有移動到頂部，它們只是被寫入 memory。

當您運行 javascript 文件時，將創建第一個全局執行上下文。 全局執行上下文給出全局 object、“this”關鍵字並提升 var 聲明和 function 聲明。

在你問題的第一部分：

var boo = 11
console.log(boo) // 11
var boo = 10

boo 是這樣吊起來的：

var boo=undefined. 

因為變量是部分提升的。 var boo=10不會覆蓋var boo=undefined 。 這是吊裝后的樣子：

var boo=undefined
    boo = 11
    console.log(boo) // it is clear why 11
    var boo = 10

在你問題的第二部分：

var boo = 11
function foo() {
   console.log(boo)
   var boo = 10
}
foo() 

全局上下文中的 var boo 被部分提升。

var boo=undefined

但這與我們無關。 因為當我們創建一個新的 function 並調用它時，會創建一個新的執行上下文，並且在這個執行上下文中會發生另一個提升，如下所示：

function foo() {
   var boo=undefined  
   // "boo" is partially hoisted inside  
   // "boo" is written into the variable environment of the execution context
   // "foo()" will always look into the its variable environment first
   console.log(boo)
   boo = 10
}

我們不止一次地定義了一個變量，但在不同的范圍內。 我們在父 scope 中有var boo =11 ，在本地 scope 中有var boo=10 。 這是可變陰影的一個示例。 foo() 將首先使用局部變量，因此局部變量會覆蓋父項的值。

Answer 4

在第一次需要覆蓋 boo 之后不要一直使用 var

編輯：它是未定義的，因為你要聲明它兩次

如果聲明一次然后在 function 中覆蓋，則只有 2 個可以正常工作

 // (1) var boo = 11 console.log(boo) // 11 boo = 10

 // (2) var boo = 11 function foo() { console.log(boo) boo = 10 } foo() // 11

如果您想在 function 中過度聲明並調用您至少需要在聲明后對其進行控制台

 // (2) var boo = 11 function foo() { boo = 10 console.log(boo) } foo() // 10