JavaScript 提升

目录

    显示目录

提升是 JavaScript 将声明移动到 顶部。

JavaScript 声明被提升

在 JavaScript 中，变量可以在使用后声明。

换句话说;变量可以在声明之前使用。

示例 1 给出的结果与示例 2 相同：

实施例1

x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;                     
// Display x in the element
var x; // Declare x

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;           // Display x in the element

var x; // Declare x
</script>

</body>
</html>

实施例2

var x; // Declare x
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;                     
// Display x in the element

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x; // Declare x
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;           // Display x in the element
</script>

</body>
</html>

要理解这一点，你必须理解“提升”这个词。

提升是 JavaScript 的默认行为，即将所有声明移动到 当前作用域的顶部（到当前脚本或当前函数的顶部）。

let 和 const 关键字

使用 let 和 const 定义的变量被提升到顶部 的代码块，但未初始化。<p>含义：代码块知道 变量，但在声明之前不能使用。 <p>在声明变量之前使用 let 变量将导致 参考错误。

该变量从一开始就处于“临时死区” 块的直到它被声明：

例子

carName = "Volvo";
let carName;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>
<p>With <b>let</b>, you cannot use a variable before it is declared.</p>
<p id="demo"></p>

<script>
try {
  carName = "Saab";
  let carName = "Volvo";
}
catch(err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>

在声明之前使用 const 变量是一个语法错误， 所以代码根本不会运行。

例子

该代码将不会运行。

carName = "Volvo";
const carName;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>

<p>With <b>const</b>, you cannot use a variable before it is declared.</p>
<p>Try to remove the //.</p>

<p id="demo"></p>

<script>
carName = "Volvo";
//const carName;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

在 JS Let/Const 中了解有关 let 和 const 的更多信息。

JavaScript 初始化未提升

JavaScript 仅提升声明，而不提升初始化。

示例 1不给出与以下相同的结果 示例2：

实施例1

var x = 5; // Initialize x
var y = 7; // Initialize y
elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;           // Display x and y

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 5; // Initialize x
var y = 7; // Initialize y

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;       // Display x and y

</script>

</body>
</html>

实施例2

var x = 5; // Initialize x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;           // Display x and y

var y = 7; // Initialize y

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 5;  // Initialize x

elem = document.getElementById("demo");      // Find an element 
elem.innerHTML = "x is " + x + " and y is " + y;  // Display x and y

var y = 7;  // Initialize y
</script>

</body>
</html>

在最后一个例子中 y 未定义有意义吗？

这是因为只有声明 (var y)，而不是初始化 (=7) 被提升到顶部。

因为提升，y在使用之前就已经被声明了，但是因为 初始化未提升，y 的值未定义。

示例2与编写相同：

例子

var x = 5; // Initialize x
var y;     // Declare y

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;           // Display x and y

y = 7;    // Assign 7 to y

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 5; // Initialize x
var y;   // Declare y

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;       // Display x and y

y = 7;   // Assign 7 to y

</script>

</body>
</html>

在顶部声明您的变量！

提升（对于许多开发人员来说）是一种未知或被忽视的行为 JavaScript。

如果开发人员不了解提升，程序可能会包含错误（错误）。<p> 为了避免错误，请始终在开头声明所有变量 每个范围。<p> 因为这就是 JavaScript 解释的方式 代码，这始终是一个好的规则。

严格模式下的 JavaScript 不允许使用以下变量： 未声明。
在下一章中学习“use strict”。