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 块或任何其他代码块。
块范围变量的生命周期在块执行完成时结束,函数范围变量也是如此。只有当您停止程序或关闭浏览器时,全局范围变量才会被销毁。