JavaScript-变量作用域

在 JavaScript 中定义变量有两种方式

ES6 之前: var 变量名称;
ES6 开始: let 变量名称;

两种定义变量方式的区别

是否能够定义同名变量

通过 var 定义变量, 可以重复定义同名的变量, 并且后定义的会覆盖先定义的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        var num = 123;
        var num = 456;
        console.log(num);
    </script>
</head>
<body>
</body>
</html>

如果通过 let 定义变量，"相同作用域内" 不可以重复定义同名的变量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let num = 123;

        // 报错 Uncaught SyntaxError: Identifier 'num' has already been declared
        let num = 456;
    </script>
</head>
<body>
</body>
</html>

是否能够先使用后定义

通过 var 定义变量, 可以先使用后定义 (预解析)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        console.log(num);
        var num = 123;
    </script>
</head>
<body>
</body>
</html>

通过 let 定义变量, 不可以先使用再定义 (不会预解析)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        // 报错 Uncaught ReferenceError: Cannot access 'num' before initialization at index.html?_ijt=37c9th389lfunccvo6ijq9ebdd:8
        console.log(num);

        let num = 123;
    </script>
</head>
<body>
</body>
</html>

是否能被 {} 限制作用域

无论是 var 还是 let 定义在 {} 外面都是全局变量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        var num = 123;
        let num = 123;
    </script>
</head>
<body>
</body>
</html>

将 var 定义的变量放到一个单独的 {} 里面, 还是一个全局变量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        {
            var num = 123;
        }

        // 不会报错
        console.log(num);
    </script>
</head>
<body>
</body>
</html>

将 let 定义的变量放到一个单独的 {} 里面, 是一个 局部变量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        {
            let num = 123;
        }
        // 会报错 Uncaught ReferenceError: num is not defined
        console.log(num);
    </script>
</head>
<body>
</body>
</html>

在 JavaScript 中 {} 外面的作用域, 我们称之为全局作用域。
在 JavaScript 中函数后面 {} 中的的作用域, 我们称之为 "局部作用域"。
在 ES6 中只要 {} 没有和函数结合在一起, 那么应该称之为 "块级作用域"。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        {
            // 块级作用域
        }
        
        if (false) {
            // 块级作用域
        }
        
        while (false) {
            // 块级作用域
        }
        
        for (; ;) {
            // 块级作用域
        }
        
        do {
            // 块级作用域
        } while (false);
        
        switch () {
            // 块级作用域
        }

        function say() {
            // 局部作用域
        }
    </script>
</head>
<body>
</body>
</html>

块级作用域和局部作用域的区别

在块级作用域中通过 var 定义的变量是 全局变量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        {
            // 块级作用域 ↓ 全局变量
            var num = 123;
        }
        console.log(num);
    </script>
</head>
<body>
</body>
</html>

在局部作用域中通过 var 定义的变量是 局部变量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        function test() {
            // 局部变量
            var value = 666;
        }

        test();
        console.log(value);
    </script>
</head>
<body>
</body>
</html>

无论是在块级作用域还是在局部作用域, 省略变量前面的 let 或者 var 就会变成一个 全局变量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        function test() {
            // 全局变量
            value = 666;
        }

        test();
        console.log(value);
    </script>
</head>
<body>
</body>
</html>
posted @   BNTang  阅读(52)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示