JavaScript 中的提升
提升是一種行為，其中變數和函數宣告在先前被移動（或「提升」）到其包含範圍（全域範圍或函數範圍）的頂部程式碼被執行。這意味著您可以在程式碼中實際聲明變數和函數之前使用它們。
變數提升
變數
- 用 var 宣告的變數被提升到其作用域的頂部，但它們的值直到程式碼中發生賦值的地方才會被初始化。
console.log(x); // undefined
var x = 5;
console.log(x); // 5
登入後複製
讓和常數
- 用 let 和 const 宣告的變數也會被提升，但會被放置在「臨時死區」中，直到到達它們的宣告為止。在聲明之前訪問它們將導致引用錯誤。
console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 10;
// block scope
{
let x = 5;
}
console.log(x); // ReferenceError: x is not defined
登入後複製
函數提升
傳統功能
- 函數宣告被完全提升，這表示宣告和函數體都被移動到作用域的頂端。這允許您在程式碼中聲明函數之前調用該函數。
sayHello(); // "Hello!"
function sayHello() {
console.log("Hello!");
}
登入後複製
- 相反，函數表達式（將函數分配給變數）僅作為變數提升，因此在初始化變數之前調用它們將導致未定義或類型錯誤。
greet(); // TypeError: greet is not a function
var greet = function () {
console.log("Hi!");
};
greet(); // ReferenceError: Cannot access 'one' before initialization
let greet = function () {
console.log("Hi!");
};
登入後複製
箭頭功能
- 相反，函數表達式（將函數分配給變數）僅作為變數提升，因此在初始化變數之前調用它們將導致未定義或類型錯誤。
greet(); // TypeError: greet is not a function
var greet = () => {
console.log("Hi!");
};
greet(); // ReferenceError: Cannot access 'one' before initialization
let greet = function () {
console.log("Hi!");
};
登入後複製
暫時死區 (TDZ)
使用 let 和 const 宣告的變數存在臨時死區 (TDZ)，因為 JavaScript 旨在防止您在宣告和初始化這些變數之前存取它們。
為什麼 var 和 let、const 在提升中表現不同
- 這是因為 JavaScript 的歷史演進。
- 最初，JavaScript 是為非開發人員的使用者設計的，JavaScript 的主要核心用途是為網頁添加小型互動元素。
- 因此 var 僅支援函數作用域。同樣在那個時候，還沒有塊作用域。
- 但是在 JavaScript 的後製發展中，使用 var 和修復 bug 變得更加複雜。
- 因此，為了讓 JavaScript 與其他現代語言競爭，增加了更多功能，如 let、const、箭頭函數、ES6 方法等。
為什麼 var 不像 let 和 const 那樣更新
- 這是因為向後相容。
- 當時，JavaScript 被許多企業廣泛使用，因此更新或變更現有功能會導致破壞程式碼庫。
- 因此，單獨添加了現代功能。
常見面試問題
- JavaScript 中的提升是什麼？
- JavaScript 中什麼是提升的，什麼不是？
- var、let 和 const 在提升方面有什麼不同？
- JavaScript 中的臨時死區 (TDZ) 是什麼？
- 您能解釋一下使用函數宣告與函數表達式進行提升嗎？
- ES6 模組中的提升是什麼？
- 為什麼我們應該避免在現實程式碼中依賴提升？
概括
- 提升是 JavaScript 中的預設行為，其中變數和函數宣告在編譯階段被移到各自作用域的頂端。
- 提升僅適用於使用 var 和傳統函數宣告的變量，不適用於 let、const 和箭頭函數。
- 僅提升函數聲明，因此傳統函數可以工作，但如果將函數分配給變量，則在定義之前它無法調用。
- 之所以 var 和傳統函數被提升，而 let、const 和箭頭函數沒有被提升，是因為在初期，JavaScript 主要用於小型 UI 互動。
- 但後來，隨著 JavaScript 被廣泛用於企業建立應用程序，僅在全局範圍內修復錯誤變得更加困難。
- 因此在未來的更新中，會解決更多安全性問題。
- 此外，更新現有功能會破壞程式碼庫，因此單獨新增功能。
以上是了解 JavaScript 中的提升：綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
