JavaScript - 变量范围

JavaScript 变量范围

JavaScript 中的变量范围决定了变量在代码不同部分的可访问性和可见性。范围是代码执行的当前上下文。这意味着变量范围由它的执行位置决定，而不是由它的声明位置决定。

在 JavaScript 中，对象和函数也是变量。因此，JavaScript 变量范围也决定了程序中对象和函数的可访问性或可见性。

学习 JavaScript 中的变量范围以编写清晰的代码并避免命名冲突至关重要。

JavaScript 中有以下类型的变量范围。

块范围（Block scope）
函数范围（Function scope）
本地范围（Local scope）
全局范围（Global scope）

在这里，我们将介绍块、函数和本地范围。我们将在 JavaScript 全局变量章节中讨论 detain 中的全局范围。

JavaScript 块范围

在 JavaScript ES6 之前，只有 Global 和 Function 范围。ES6 引入了 let 和 const 关键字。这些关键字在 JavaScript 中提供 Block Scope。

在 { } 块中使用 'let' 和 'const' 关键字定义的 JavaScript 变量只能在定义它们的块内访问。


{
	 	let x = 10; // x is accessible here
}
//x is not accessible here

使用 var 关键字定义的变量 is 不提供块范围。


{
	 	var x = 10; // x is accessible here
}
//x is accessible here also

例

在下面的示例中，我们在 'if' 块中定义了变量 'a'。在输出中，你可以看到变量 'a' 只能在 'if' 块内访问。如果你试图在 'if' 块之外访问变量 'a'，它将抛出一个引用错误，比如 'variable a is not defined'。


<html>
<head>
	 	<title> JavaScript - Block scope </title>
</head>
<body>
	 	<p id = "output"> </p>
	 	<script>
	 	 	 if (true) {
	 	 	 	 	let a = 10;
	 	 	 	 	document.getElementById("output").innerHTML = "a = " + a;
	 	 	 }
	 	 	 // a can't be accessed here
	 	</script>
</body>
</html>

输出

a = 10

例

在下面的代码中，我们定义了 test（）函数。在该函数中，我们使用大括号添加了一个 { } 块，在 { } 块中，我们定义了变量 'x'。变量 'x' 不能在 { } 块之外访问，因为它具有块范围。


<html>
<head>
	 	<title> JavaScript - Block scope </title>
</head>
<body>
	 	<p id = "demo"> </p>
	 	<script>
	 	 	 const output = document.getElementById("demo");
	 	 	 function test() {
	 	 	 	 	{
	 	 	 	 	 	 let x = 30;
	 	 	 	 	 	 output.innerHTML = "x = " + x;
	 	 	 	 	}
	 	 	 	 	// variable x is not accessible here
	 	 	 }
	 	 	 test();
	 	</script>
</body>
</html>

输出

x = 30

每当你在块内使用 'let' 或 'const' 关键字定义变量时，如 loop 块、if-else 块等，它都不能在块外访问。

JavaScript 函数范围

在 JavaScript 中，每个函数都会创建一个范围。函数中定义的变量具有函数范围。函数中定义的变量只能从同一函数中访问。这些变量不能从函数外部访问。

每当你在函数中使用 'var' 关键字定义变量时，该变量可以在整个函数中访问，即使它是在特定块内定义的。

例如


function func() {
	 	{
	 	 	 var x; // function scope
	 	 	 let y; // Block scope
	 	 	 const z = 20; // Block scope
	 	}
	 	// x is accessible here, but not y & z
}

例

在下面的示例中，我们分别使用 var、let 和 const 关键字定义了变量 'x'、'y' 和 'z'。变量 'x' 可以在函数内部的任何地方访问，因为它具有函数范围，但 'y' 和 'z' 只能在定义它的块内访问。


<html>
<head>
	 	<title> JavaScript - Function scope </title>
</head>
<body>
	 	<p id = "demo"> </p>
	 	<script>
	 	 	 const output = document.getElementById("demo");
	 	 	 function func() {
	 	 	 	 	{
	 	 	 	 	 	 var x = 30;
	 	 	 	 	 	 let y = 20;
	 	 	 	 	 	 const z = 10;
	 	 	 	 	 	 output.innerHTML += "x -> Inside the block = " + x + "<br>";
	 	 	 	 	 	 output.innerHTML += "y -> Inside the block = " + y + "<br>";
	 	 	 	 	 	 output.innerHTML += "z -> Inside the block = " + z + "<br>";
	 	 	 	 	}
	 	 	 	 	output.innerHTML += "x -> Outside the block = " + x + "<br>";
	 	 	 	 	// y and z can't be accessible here
	 	 	 }

	 	 	 func();
	 	</script>
</body>
</html>

输出

x -> Inside the block = 30
y -> Inside the block = 20
z -> Inside the block = 10
x -> Outside the block = 30

JavaScript 本地范围

JavaScript 本地范围是函数和块范围的组合。JavaScript 编译器在调用函数时创建一个局部变量，并在函数调用完成时将其删除。

简而言之，在函数或块中定义的变量是该特定范围的本地变量。函数参数被视为函数内部的局部变量。

例

在下面的代码中，我们使用 var、let 和 const 关键字定义了函数内的变量。所有变量都是函数的本地变量。它不能在函数之外访问。

同样，我们可以在 local 作用域中定义循环变量。


<html>
<head>
	 	<title> JavaScript - Local scope </title>
</head>
<body>
	 	<p id = "demo"> </p>
	 	<script>
	 	 	 const output = document.getElementById("demo");
	 	 	 function func() {
	 	 	 	 	let first = 34;
	 	 	 	 	var second = 45;
	 	 	 	 	const third = 60;

	 	 	 	 	output.innerHTML += "First -> " + first + "<br>";
	 	 	 	 	output.innerHTML += "Second -> " + second + "<br>";
	 	 	 	 	output.innerHTML += "Third -> " + third + "<br>";
	 	 	 }
	 	 	 func();
	 	</script>
</body>
</html>

输出

First -> 34
Second -> 45
Third -> 60

我们注意到，当在函数中定义变量时，该变量将成为函数的 Local。在这种情况下，变量具有函数范围。当一个变量在特定块中定义时，它将成为该块的本地变量，并具有块范围。

<< JavaScript - 闭包 JavaScript - 全局变量 >>