JavaScript 变量作用域如何工作?
在本教程中，我们将了解 JavaScript 变量作用域如何工作。在 ES5 中，变量只有两个作用域:全局作用域和 函数作用域。在 ES6 中，我们为变量提供了三个作用域，作为附加的额外作用域，即 块 作用域。但是函数作用域和块作用域属于局部作用域类别。
下面我们通过示例解释了这三个作用域。
- 块作用域
- 函数作用域
- 全局作用域
块作用域
JavaScript 有三个关键字来声明变量:let、const和var。let和const关键字是在 ES6 中与块作用域一起引入的。因此，只有使用 let 和 const 关键字声明的变量才提供块作用域，而使用 var 关键字声明的变量则不提供块作用域。
语法
用户可以看到块作用域的语法如下。
- 使用 let 关键字。
{ let str = "TutorialsPoint"; // scope of the str is limited to this block only }
- Using the var keyword.
{ var num = 100; } // num 也可以在块外使用，因为它是用 var 关键字声明的。
示例
以下示例演示了变量的块范围。
<!DOCTYPE html>
<html>
<body>
<h2> Variable scope in JavaScript. </h2>
<h4> When we use variable declared with var keyword outside the block. </h4>
<div id="var"> </div>
<h4> When we use variable declared with let keyword outside the block.</h4>
<div id="let"></div>
<script>
let letOutput = document.getElementById("let");
let varOutput = document.getElementById("var"); {
let str = "tutorialsPoint"; // block scope
var num = 100;
}
varOutput.innerHTML = num;
letOutput.innerHTML = str; // str 未定义错误在控制台中出现。
</script>
</body>
</html>
在上面的输出中，用户可以看到对于 str 变量，上面的代码在控制台中给出了一个错误，如 “str 未定义。” 因为我们正在访问块外使用 let 关键字声明的变量。
函数作用域
当我们在 JavaScript 中声明一个函数时，它会为函数内声明的每个变量创建一个新的作用域。与块作用域不同，函数内使用 var、let 和 const 关键字声明的变量都具有函数作用域。在函数内部声明的变量，我们不能在函数外部使用它们。
此外，每个函数在声明时都会创建一个新的作用域。因此，在不同的函数中，用户可以使用 let、const 和 var 中的任何关键字声明具有相同名称的变量。
在此方法中，我们还将看到如何在函数内部使用块作用域。
语法
用户可以按照以下语法查看函数作用域的用法。
- 使用 var、let 和 const 关键字。
function demo( ) { // all variables have function scope, and can’t be accessed outside the function. let x = 10; var y = 20; const z = 30; } function variableDemo ( ) { var x = "hello"; // we can declare variable with same name in different function { let y = 20; // block scope } // y can’t be accessed here. } let a = x; // gives an error as x has only function scope.
示例
在下面的例子中，我们给出了函数作用域的演示。
<!DOCTYPE html>
<html>
<body>
<h2> Function scope in JavaScript. </h2>
<h4> values of x, y, z variables in demo() function. </h4>
<div id="demo"></div>
<h4> values of x, y, z variables in varialeDemo() function. </h4>
<div id="vardemo"> </div>
<script>
let demoOutput = document.getElementById("demo");
let vardemoOutput = document.getElementById("vardemo");
function demo() {
let x = 10;
var y = 20;
const z = 30;
demoOutput.innerHTML = "x: " + x + ", y: " + y + ", z: " + z;
}
function variableDemo() {
var x = " hello ";
{
let y = " hello again! ";
vardemoOutput.innerHTML = "x: " + x + ", y: " + y;
}
}
demo();
variableDemo();
</script>
</body>
</html>
在上面的输出中，用户可以看到两个函数内的 x 和 y 变量的值是不同的。如果我们尝试在函数外部访问 x、y 或 z 变量，它将在 Web 浏览器的控制台内返回错误。
全局范围
如果我们在块或函数之外声明一个变量，它将变为全局，我们可以从程序内部的任何地方访问它。用户可以使用所有三个let、var 和 const关键字声明全局变量。
语法
按照以下语法使变量成为全局变量。
let globalVar = 20; function demo ( ) { let res = globalVar + 20; // we can access global variable inside the function } let y = globalVar // we can access the global variable anywhere in the code.
示例
在下面的例子中，我们将在函数内部或代码中的任何位置使用全局变量。不过，我们仅使用了使用 let 关键字声明的全局变量，但用户可以使用 var 和 const 关键字来声明全局变量。
<html>
<body>
<h2> Function scope in JavaScript. </h2>
<h4> When we access the global variable inside the function. </h4>
<div id="demo"> </div>
<h4> Accessing the global variable outside the funciton. </h4>
<div id="vardemo"> </div>
<script>
let demoOutput = document.getElementById("demo");
let vardemoOutput = document.getElementById("vardemo");
let globalVar = 20;
function demo() {
let result = globalVar + 10;
demoOutput.innerHTML = "The sum of globalVar with 10 is " + result;
}
vardemoOutput.innerHTML = globalVar;
demo();
</script>
</body>
</html>
在上面的输出中，用户可以看到，当在代码中的任何位置访问全局变量时，不会出现错误。
结论
本教程教我们如何在 JavaScript 中工作变量范围。如果用户有任何需要在代码的任何地方使用的变量，他们应该将其设为全局变量。如果需要变量在特定函数内，请将其设为功能范围。用户可以在块内声明变量以使用循环、if-else 块或任何其他代码块。
块范围变量的生命周期在块执行完成时结束，函数范围变量也是如此。只有当您停止程序或关闭浏览器时，全局范围变量才会被销毁。
