在 JavaScript 中 , 块级作用域 指的是 在一对大括号 {}
内 声明的变量 只在这对大括号内部可见 ;
在 ES6 之前 JavaScript 只有 全局作用域 和 局部作用域 概念 , 没有 块级作用域 概念 , 此时 块级作用域 相当于 全局作用域 或 局部作用域 , 具体 取决于 {}
是在哪个作用域中 ;
<script>
标签内部 和 js 脚本中 ;
使用了 var 关键字 声明的 变量 实际上具有 函数作用域 或 全局作用域 ;
ES6 引入了 let 和 const 关键字 , 这两个关键字 声明的 变量 或 常量 具有块级作用域 ;
在 {}
代码块中 , 使用 let 或 const 声明 变量 或 常量 , 在 代码块 外部无法访问 ;
在下面的代码中 ,
在 {}
代码块中 , 使用 var 关键字声明的变量 ,
不具有块级作用域 , 而是具有 函数作用域 或 全局作用域 ;
num 是在 if 语句内部声明的 , 由于 使用了 var 关键字 , num 变量 实际上具有 全局作用域 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
<script>
// 块级作用域
// ES6 之前没有 块级作用域
// 此时 块级作用域 = 全局作用域
if (true) {
var num = 888;
console.log("num = " + num);
}
console.log("num = " + num);
</script>
</head>
<body>
</body>
</html>
执行结果 :
ES6 引入了 let 和 const 关键字 , 这两个关键字声明的变量具有块级作用域 ;
在下面的代码中 , 变量 num2 是在 if 语句的 块级作用域 中声明 , 因此它只在 if 语句的大括号 {} 内部可见 ;
如果在 if 语句外部访问 num2 变量 , 会抛出如下错误 :
hello.html:19 Uncaught ReferenceError: num2 is not defined
at hello.html:19:33
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript</title>
<style></style>
<script>
// 块级作用域
// ES6 之后 使用 let / const 声明变量 具有 块级作用域
if (true) {
let num2 = 666;
console.log("num2 = " + num2);
}
console.log("num2 = " + num2);
</script>
</head>
<body>
</body>
</html>
执行结果 :