JS提升如何與block語句一起工作？

Question

在下面的代碼片段中，我只想了解為什么console.log(abc in this); 打印為true，但在下一行console.log(abc); 變得undefined

console.log(this.abc);//undefined
console.log(abc in this);//true
console.log(abc);//undefined
{
    function abc(){
        console.log("hello");
    }
}
console.log(abc); //ƒ abc(){console.log("hello");

你們中的任何人都可以解釋在這種情況下起吊和封鎖聲明如何工作嗎？

Answer 1

在草率模式下， this是指全局對象。 像這樣的普通非功能塊內部的函數將其變量名稱提升到外部作用域，但是在執行內部塊之前，實際函數不會分配給外部變量（分配給window屬性）。

詳細信息請參見此處：

ES6中塊級函數的確切語義是什么？

正如在另一個問題中所解釋的那樣，對於解釋器，您的代碼看起來像這樣：

 window.abc = undefined; // top-level hoisting assigns to window properties console.log(window.abc); // undefined console.log(window.abc in window); // true console.log(window.abc); // undefined { var _abc = function abc() { console.log("hello"); }; window.abc = _abc; } console.log(window.abc); //ƒ abc(){console.log("hello"); 

abc in this之所以成立是因為abc 已被初始化為window對象的屬性，但尚未為其分配值。 這類似於這里發生的事情：

 const obj = { foo: undefined }; console.log('foo' in obj); 

Answer 2

簡而言之，使用console.log(abc in this); 它會檢查它是否存在，因此將其記錄為true ，盡管您尚無法訪問它，因此對於在函數聲明之前執行的其他兩個console.log來說，其狀態是undefined的。

Answer 3

如果您想知道為什么會這樣，答案很簡單，提升將所有聲明移到其作用域的頂部，因此：

console.log(this.abc); //undefined
console.log(abc in this); //true
console.log(abc); //undefined

function abc() {
  console.log("hello");
}

console.log(abc); //ƒ abc(){console.log("hello");

因此在內部函數中，函數abc（）聲明在當前作用域的頂部，幾乎保持在相同的位置，而僅僅是聲明，因此，當您嘗試在底部訪問時，已經聲明了var abc並進行了賦值在第一個console.log中知道該功能的地方，其中未定義

console.log（abc）函數_abc尚未被除名，但是在第二個示例中您可以訪問它，因為它訪問Windows對象並獲取abc。

因此，簡而言之，javascript首先初始化變量，因為在第二個console.log中，所有變量都已經聲明，並且已在window對象中聲明，因此訪問abc可以正常工作。