数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究我可以在声明 JavaScript 变量之前使用它吗？
是的，您可以使用一种称为**提升 (hoisting)** 的技术在声明 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 中的提升以及提升如何与变量和函数一起工作。
3K+ 次浏览
