Javascript 简明教程
JavaScript - Variable Scope
JavaScript Variable Scope
JavaScript 中的 {s0} 决定了变量在代码不同部分的可访问性和可见性。{s1} 是代码执行的当前上下文。这意味着变量作用域是由其执行的位置而不是声明的位置决定的。
The variable scope in JavaScript determines to the accessibility and visibility of the variable in different part of the code. The scope is the current context of the code execution. This means the variable scope is determined by where it is executed not by where it is declared.
在 JavaScript 中，对象和函数也是变量。所以 JavaScript 变量 {s2} 也决定了程序中对象和函数的可访问性或可见性。
In JavaScript, the objects and functions are also variables. So the JavaScript variable scope also determines the accessibility or visibility of objects and functions also in the program.
了解 JavaScript 中的变量作用域对于编写清晰的代码和避免命名冲突至关重要。
It is essential to learn the variable scope in JavaScript to write clear code and avoid naming conflicts.
JavaScript 中有以下几种类型的变量作用域。
There are following types of variable scope in JavaScript.
-
Block scope
-
Function scope
-
Local scope
-
Global scope
在此，我们将介绍块、函数和局部作用域。我们在 JavaScript 全局变量章节中详细讨论了全局作用域。
Here, we will cover the block, function, and local scope. We will discuss Global scope in detain in JavaScript Global variable chapter.
JavaScript Block Scope
在 JavaScript ES6 之前，只有全局和函数作用域。ES6 引入了 let 和 const 关键字。这些关键字提供 JavaScript 中的块作用域。
Before JavaScript ES6, there were only Global and Function scopes. ES6 introduced the let and const keywords. These keywords provide the Block Scope in JavaScript.
使用 { } 块内的 'let' 和 'const' 关键字定义的 JavaScript 变量只能在其定义的块内进行访问。
The JavaScript variables defined using the 'let' and 'const' keyword inside a { } block can be accessible only inside the block in which they are defined.
{
let x = 10; // x is accessible here
}
//x is not accessible here使用 var 关键字定义的变量不会提供块作用域。
A variable defined with var keyword is does not provide block scope.
{
var x = 10; // x is accessible here
}
//x is accessible here alsoExample
在下面的示例中，我们在 'if' 块内定义了变量 'a'。在输出中，你可以看到变量 'a' 只能在 'if' 块内访问。如果你尝试在 'if' 块之外访问变量 'a'，它将抛出引用错误，如“变量 a 未定义”。
In the example below, we defined the variable 'a' inside the 'if' block. In the output, you can see that variable 'a' is accessible only inside the 'if' block. If you try to access the variable 'a' outside the 'if' block, it will throw a reference error like '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 = 10Example
在下面的代码中，我们定义了 test() 函数。在函数中，我们使用花括号添加了一个 { } 块，在 { } 块内，我们定义了变量 'x'。变量 'x' 不能在 { } 块外部访问，因为它有块作用域。
In the below code, we have defined the test() function. In the function, we have added a { } block using the curly braces, and inside the { } block, we have defined the variable 'x'. The variable 'x' can’t be accessible outside the { } block as it has a block scope.
<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' 关键字定义变量时，比如循环块、if-else 块等，都无法在块外部访问该变量。
Whenever you define the variable using the 'let' or 'const' keyword inside the block, like loop block, if-else block, etc., it can’t be accessible outside the block.
JavaScript Function Scope
在 JavaScript 中，每个函数创建一个作用域。在函数内定义的变量具有函数作用域。在函数中定义的变量只能从同一函数中访问。这些变量不能从函数外部访问。
In JavaScript, each function creates a scope. The variables defined inside a function have function scope. The variable defined in a function are accessible from within the same function only. These variable are not accessible from the outside of the function.
每当你使用 'var' 关键字在函数中定义变量时，都可以访问该变量，即使该变量是在特定块内定义的。
Whenever you define the variable inside the function using the 'var' keyword, the variable can be accessible throughout the function, even if it is defined inside the particular block.
例如，
For example,
function func() {
{
var x; // function scope
let y; // Block scope
const z = 20; // Block scope
}
// x is accessible here, but not y & z
}Example
在下例中，我们使用 var、let 和 const 关键字分别定义了变量 'x'、'y' 和 'z'。变量 'x' 可以在整个函数的任何地方访问，因为它具有函数作用域，但 'y' 和 'z' 只能在其定义的块内访问。
In the example below, we have defined the variable 'x', 'y', and 'z' using the var, let, and const keywords, respectively. The variable 'x' can be accessible inside the function anywhere as it has a function scope, but 'y' and 'z' can only be accessible inside the block in which it is defined.
<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 = 30JavaScript Local Scope
JavaScript 局部作用域是函数和块作用域的组合。当函数被调用时，JavaScript 编译器创建局部变量，当函数调用完成时将其删除。
The JavaScript local scope is a combination of the function and block scope. The JavaScript compiler creates a local variable when the function is invoked and deletes it when the function invocation completes.
简而言之，在函数或块内定义的变量是该特定作用域的局部变量。函数参数在函数内被视为局部变量。
In short, variables defined inside the function or block are local to that particular scope. The function parameters are treated as local variables inside the function.
Example
在下面的代码中，我们使用 var、let 和 const 关键字在函数内定义了变量。所有变量都是函数的局部变量。无法在函数外部访问它。
In the below code, we have defined the variables inside the function using the var, let, and const keywords. All variables are local to the function. It can’t be accessible outside the function.
同样，我们可以在局部作用域中定义循环变量。
Similarly, we can define the looping variables in the local scope.
<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我们注意到，当一个变量在函数内定义时，该变量成为函数的局部变量。在这种情况下，变量具有函数作用域。当一个变量在特定块内定义时，它成为该块的局部变量并具有块作用域。
We notice that the when a variable is defined inside a function, the variable become Local to the function. In this situation, the variable has function scope. When a variable is defined inside a particular block, it becomes local to that block and has block scope.