資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學我可以在宣告 JavaScript 變數之前使用它嗎？
是的，您可以使用一種稱為提升的技術在宣告 JavaScript 變數之前使用它。解析器會在執行函式之前讀取整個函式。
變數在宣告之前似乎被使用的行為稱為提升。
例如，以下程式碼：
rank = 5; var rank;
上面的程式碼與以下程式碼作用相同：
var rank; rank = 2;
JavaScript 中的提升允許我們宣告變數、函式或類，這些變數、函式或類會在程式碼執行之前被移動到作用域的頂部，無論它們的作用域是區域性還是全域性。
JavaScript 在執行之前為所有變數和函式分配記憶體。請注意，提升指的是宣告，而不是初始化。
由於變數和函式在程式碼中宣告之前就被使用，因此可能會出現意外錯誤。因此，不建議使用提升。提升對 var、let 和 const 的作用不同。我們可以詳細檢查以下內容。
首先，我們將檢查使用 var 進行提升的示例。稍後我們將詳細檢查變數提升。
示例
<!DOCTYPE html>
<html>
<body>
<h4>Hoisting Example</h4>
<p id="output"></p>
<script>
x = 10; // Assign 5 to x
document.getElementById("output").innerHTML = x;
var x; // Declare x
</script>
</body>
</html>
在這裡，我們可以看到我們在宣告 x 變數之前使用了它。
現在，我們將檢查 JavaScript 只提升宣告，而不提升初始化。讓我們看另一個例子
示例
<!DOCTYPE html>
<html>
<body>
<h3>Hoists only declarations</h3>
<p id="output"></p>
<script>
x = 10; // initialize x
document.getElementById("output").innerHTML = x + " , " + y;
var x; // declare x
var y = 20; // declare and initialize y
</script>
</body>
</html>
在這裡，我們可以檢查提升意味著需要在使用 y 之前對其進行初始化。但是 y 沒有初始化。因此，這沒有被提升。這就是為什麼 y 的值為 undefined。我們可以按照示例 1 中提到的方法正確編寫。
示例
<!DOCTYPE html>
<html>
<body>
<h1>Hoists only declarations</h1>
<p id="output"></p>
<script>
var x = 10; // Initialize x
var y; // declare y
document.getElementById("output").innerHTML = x + " , " + y;
y = 20; // Initialize y
</script>
</body>
</html>
在這裡，變數 y 已宣告，但我們顯示它之前未初始化。
JavaScript 只提升宣告，不提升初始化。
始終注意，在後臺，JavaScript 首先宣告變數併為其初始化值。在 JS 中，未宣告的變數在分配程式碼執行之前不存在。因此，在執行賦值程式碼時，未宣告的變數被視為全域性變數。讓我們更深入地研究變數提升。
let 和 const 提升
我們都知道 let 和 const 是塊作用域的，而不是函式作用域的。let 和 const 是在 ES6 中引入的。我們知道 ES6 不允許未宣告的值。如果我們嘗試在宣告之前使用變數，它將丟擲引用錯誤。與 var 不同，變數不會使用預設值初始化。讓我們看一個例子
示例
<!DOCTYPE html>
<html>
<body>
<h3>Hoisting with let</h3>
<p id="output"></p>
<script>
try{
document.getElementById("output").innerHTML = x;
let x = "Hi";
} catch(err) {
document.getElementById("output").innerHTML = err;
}
</script>
</body>
</html>
在這裡，我們可以觀察到我們正在嘗試在宣告 x 值之前訪問它。讓我們再看一個關於 let 的例子。
示例
<!DOCTYPE html>
<html>
<body>
<h2>Hoisting with let</h2>
<p id="result1"></p>
<p id="result2"></p>
<script>
let x;
document.getElementById("result1").innerHTML = x;
x = 5;
document.getElementById("result2").innerHTML = x;
</script>
</body>
</html>
現在，讓我們檢查 const。
使用 const 進行提升
與 let 一樣，我們不能在宣告之前使用變數，而且我們不僅需要宣告變數，還需要為其初始化值。否則，它將丟擲 SyntaxError 錯誤。讓我們看一個例子
示例
<!DOCTYPE html>
<html>
<body>
<h1>Hoisting with const</h1>
<p> It will throw Uncaought SyntaxError: Missing initializer in const declaration </p>
<p> To see this error please open the Console of the browser </p>
<p id="output"></p>
<script>
const x;
document.getElementById("output").innerHTML = x;
x = 5;
document.write(x);
</script>
</body>
</html>
宣告時需要初始化值。
示例
<!DOCTYPE html>
<html>
<body>
<h2>Hoisting with const</h2>
<p id="output"></p>
<script>
try{
document.getElementById("output").innerHTML = x;
const x = 5;
}catch(err){
document.getElementById("output").innerHTML = err;
}
</script>
</body>
</html>
與上述示例一樣，const 也無法實現。它將丟擲引用錯誤。
現在，讓我們看看函式的提升。
函式提升
函式提升允許我們在定義函式之前呼叫它。讓我們看一個例子
示例
<!DOCTYPE html>
<html>
<body>
<h2>Hoisting with function</h2>
<p id="output"></p>
<script>
getName("Devika");
function getName(name) {
document.getElementById("output").innerHTML = ("Employee name is " + name);
}
</script>
</body>
</html>
如果將函式表示式賦值給變數。輸出將取決於變數範圍。像這樣：
示例
<!DOCTYPE html>
<html>
<body>
<h2>Hoisting with function as var</h2>
<p id="output"></p>
<script>
try{
getName("Devika");
var getName = function (name) {
document.getElementById("output").innerHTML = ("Employee name is " + name);
}
}catch(err){
document.getElementById("output").innerHTML = err;
}
</script>
</body>
</html>
示例
<!DOCTYPE html>
<html>
<body>
<h2>Hoisting with function as let</h2>
<p id="output"></p>
<script>
try{
getName("Devika");
let getName = function (name) {
document.getElementById("output").innerHTML = ("Employee name is " + name);
}
}catch(err){
document.getElementById("output").innerHTML = err;
}
</script>
</body>
</html>
示例
<!DOCTYPE html>
<html>
<body>
<h2>Hoisting with function as const</h2>
<p id="output"></p>
<script>
try{
getName("Devika");
const getName = function (name) {
document.getElementById("output").innerHTML = ("Employee name is " + name);
}
}catch(err){
document.getElementById("output").innerHTML = err;
}
</script>
</body>
</html>
在這裡我們可以觀察到，帶有變數的函式的工作方式不同。如果我們將函式表示式賦值為 var，我們將得到 TypeError，而使用 let 和 const，我們將得到 ReferenceError。
但是，在宣告之前使用函式是我們的個人喜好問題。
希望本教程能讓你瞭解 js 中的提升以及提升如何與變數和函式一起工作。
3000+ 次瀏覽
