【JavaScript】作用域 ② ( JavaScript 块级作用域 | ES6 之前等同于全局/局部作用域 | ES6 使用 let / const 声明变量 / 常量有块级作用域 )

韩曙亮

发布于 2024-04-09 08:55:36

760

发布于 2024-04-09 08:55:36

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

一、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>

执行结果 :