[刘阳Java]_步步窥探JS变量作用域

今天的这个文章题目名称甚是让人会突发异想。JS变量作用域是务必需要搞懂的，单从面试过程就会让面试者烧脑壳。所以，我们还是写一篇关于JS变量作用域的技术专题，让所有小伙伴能够借此文章去整理JS的基础学习。说不定很多人会比我理解这方面基础知识有更好地见解

黄金守则第一条： JS没有块级作用域（你可以自己闭包或其他方法实现），只有函数级作用域，函数外面的变量函数里面可以找到，函数里面的变量外面找不到

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
    var a = 10;
    function m01() {
        alert(a);
    }
    function m02() { // 尝试通过m02方法去改变变量a的值
        var a = 20;
        m01();
    }
    m02();
  </script>
 </head>
 <body>
 </body>
</html>

　　

黄金守则第一条原理：因为在方法m02里面定义变量a是局部变量，它不会影响最外面的var a = 10; 的值

黄金守则第二条：在函数里面定义变量 var a = b = 10; 其实a是局部变量，b是全局变量。此程序的坑实在是难以让程序员们接受

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
    function m01() {
        var a = b = 10;
    }
    m01();
    // alert(a); 运行这段代码就报错; Uncaught ReferenceError: a is not defined
    alert(b);
  </script>
 </head>
 <body>
 </body>
</html>

黄金守则第三条：变量的查找是就近原则，去寻找var定义的变量，当就近没有找到的时候就去查找外层。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
    var a = 10;
    function m01() {
        alert(a);
        var a = 20;
    }
    m01();
  </script>
 </head>
 <body>
 </body>
</html>

==============================================================

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
    var a = 10;
    function m01() {
        alert(a);
        a = 20;
    }
    m01();
  </script>
 </head>
 <body>
 </body>
</html>

======================================================

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
    var a = 10;
    function m01() {
        m02();
        alert(a);
        function m02() {
            var a = 20;
        }
    }
    m01();
  </script>
 </head>
 <body>
 </body>
</html>

这段代码有些意思，为什么会输出10。因为，在alert(a)的时候，bbb函数中的a确实为20 ，可是它对于这时的alert(a)这句话来说是局部的，alert(a)根本找不到bbb函数中的a，所以在aaa函数中它找不到a，于是乎去外面找，一找，就找到了10

黄金守则第四条：当参数跟局部变量重名时，优先级是等同的。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
    var a = 10;
    function m01(a) {
        a += 3;
    }
    m01(a);
    alert(a);
  </script>
 </head>
 <body>
 </body>
</html>

=============================================================

参数是基本类型，只传了值进去，下面的传个引用类型

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
    var a = [1,2,3];
    function m01(a) {
        a = [1,2,3,4];
    }
    m01(a);
    alert(a);
  </script>
 </head>
 <body>
 </body>
</html>

==========================================================

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
    var a = [1,2,3];
    function m01(a) {
        a.push(4);
    }
    m01(a);
    alert(a);
  </script>
 </head>
 <body>
 </body>
</html>

posted @   子墨老师  阅读(202)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 一文读懂知识蒸馏
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
点击右上角即可分享
微信分享提示