文章目录
- 一、JavaScript 块级作用域
- 1、块级作用域 - ES6 之前 等同于 全局作用域
- 2、块级作用域 - ES6 使用 let / const 声明变量 / 常量
- 3、代码示例 - ES6 之前的块级作用域 = 全局作用域
- 4、代码示例 - ES6 之后的块级作用域
一、JavaScript 块级作用域
1、块级作用域 - ES6 之前 等同于 全局作用域
在 JavaScript 中 , 块级作用域 指的是 在一对大括号 {}
内 声明的变量 只在这对大括号内部可见 ;
在 ES6 之前 JavaScript 只有 全局作用域 和 局部作用域 概念 , 没有 块级作用域 概念 , 此时 块级作用域 相当于 全局作用域 或 局部作用域 , 具体 取决于 {}
是在哪个作用域中 ;
- 全局作用域 是 在 全局范围内可见的 , 也就是在
<script>
标签内部 和 js 脚本中 ; - 局部作用域 是指在一个 函数内部声明的变量 只在这个函数内部可见 ;
使用了 var 关键字 声明的 变量 实际上具有 函数作用域 或 全局作用域 ;
- 如果 if 语句在 函数内部 , 则 在 if 代码块中 使用 var 声明变量 , 具有 函数作用域 ;
- 如果 if 语句在 全局作用域中 , 则 在 if 代码块中 使用 var 声明变量 , 具有 全局作用域 ;
2、块级作用域 - ES6 使用 let / const 声明变量 / 常量
ES6 引入了 let 和 const 关键字 , 这两个关键字 声明的 变量 或 常量 具有块级作用域 ;
在 {}
代码块中 , 使用 let 或 const 声明 变量 或 常量 , 在 代码块 外部无法访问 ;
3、代码示例 - ES6 之前的块级作用域 = 全局作用域
在下面的代码中 ,
在 {}
代码块中 , 使用 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>
执行结果 :
4、代码示例 - ES6 之后的块级作用域
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>
执行结果 :