对Js、Java、C、Python 变量作用域的比较

背景

大二上学期在做网页设计作业时，我用js的for循环批量给按钮绑定事件，但是发现没有效果，甚至iframe标签里的内容显示都显示不出来了，为了寻找原因，我搜索发现用let关键字代替var关键字就可以得到解决了。

当时的js代码：

1
2
3
4
5
6
7
8
var f = document.getElementById("frame");
var listArray = document.getElementsByTagName("li");
var titleWord = document.getElementById("title-word");
for (var i = 0; i < (listArray.length); i++) {     /* for循环小括号里的var i 改成 let i */
 var name = "frame/page (" + (i + 1) + ").html";
 console.log(name);
 listArray[i].addEventListener("click", () => { f.src = name; });
}

bug原因是i 这个变量的作用域不是在for循环内部的，在for循环结束之后i 又 “++”了，导致这些按钮绑定全都绑定乱了

后来和网页设计老师汇报了这个问题，我说当时搜索发现var是全局作用域，老师回复说：

在JavaScript中，使用var声明的变量会自动被添加到最接近的环境中。由for语句创建的变量，即使在for循环执行结束后，也依旧会存在于循环外部的执行环境中。

看位置，var并不一定是全局作用域

在函数内部，var只是函数内部局部变量

我一看，对哦，怎么可能是只要一用var声明变量了就直接全局作用域了，这也太夸张了，肯定有点限制的，限制就是在函数内部。不过我当时的这个代码里，i也没有在函数内部，所以也就相当于是全局作用域了。

但是这一点引起了我的注意，变量作用域是一个严谨的问题，我必须要把它搞清楚。于是通过写了一些代码并执行对比了一下js里的var了let的区别

对比let和var之后，我忽然想到，为什么我平时写python、写java、之前写C语言的时候没有出现过这种问题？

我只有在写python的时候遇到一点小问题：在py文件中写几个函数，再在最下面写一个 if __name__ == '__main__': 然后再在这里面写东西，但是总是会发现在这里面写的变量会和函数里的一些变量重名警告提示，和java就就是不一样，但是一直都没太当回事。

我感觉不对劲了，python、java、c之间的作用域它们都是怎么样的？都有什么区别？我好像快弄混了，于是我都通通测试了一番。

比较与分析

js中用var声明的变量

1
2
3
4
5
6
7
8
9
10
// console.log(k);  //报错 k没有被定义
function test() {
    console.log(k);	//打印出了 undefined
    for(var k = 0; k < 3; k++){
        console.log(k);  
    } // 打印了 0 1 2
    console.log(k); // 3  之所以增加了一个，是因为for循环在执行循环体结束的时候才会让i增加1
}
test();
// console.log(k);  //报错 k没有被定义

var只要一被声明，整个空间里就有了var这个变量，这个空间是限制在仅外面那一层函数内的所有空间，不能逃离这个函数。

当然如果外面就是最外面，script标签或者js文件，没有函数包裹着var声明语句了，那这个变量作用域就是全局了。

js中用let声明的变量

会被限制在for循环的区域里，这里指的区域是包括小括号+大括号组成的区域，在此区域外找不到

1
2
3
4
5
// console.log(j);  //报错，未找到变量
for (let j = 0; j < 10; j++){
    console.log(j);
}
// console.log(j);  //报错，未找到变量

for循环有区域限制，那if语句的解构呢？

试了一下发现也会被限制在if的区域里，指的是大括号区域，在此区域外找不到

1
2
3
4
if (true){
    let c = 3.2;
}	
// console.log(c); //报错，未找到变量

for有区域限制，就连一个if (true){}顺势往下执行的方式也有区域限制，那么我直接写一个空白的大括号会怎么样呢？

试了一下发现这样也会有限制，说明只要是大括号就会限制let关键字声明的变量的作用范围，真不错。

1
2
3
4
5
6
7
8
9
10
11
{
    let a = 1;
    console.log(a);  
}
console.log(a); //报错，未找到变量

{
    var b = 8;
    console.log(b);
}
console.log(b); //可以找到变量

python中声明变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# -*- encoding: utf-8 -*-
# print(i)  # 报错，找不到变量


def test():
    for i in range(3):
        print(i)
    print("---")
    print(i)  # 和js的for循环不一样，i还是2，没有再增加了
    if True:
        j = 100
        print(j)
    print(j)
    while j == 100:
        k = 10
        j += 1
        print(k)
    print(k)  # 虽然没报错可运行，但是pyCharm里给出了“局部变量可能在赋值之前被引用”的警告


test()
# print(i)  # 报错，找不到变量

输出结果：

1
2
3
4
5
6
7
8
9
0
1
2
---
2
100
100
10
10

python的语法只用缩进表示块解构，没有大括号的写法，所以只能测试for循环和while循环和if结构。

测试发现它居然和js里的var是一样的，但是for循环不一样，是因为python的for循环遍历的是一个数字序列，遍历结束的时候不会再增加i的值，i的值始终是range(3) 即 [0, 1, 2] 里面的值

C语言中声明变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#include<stdio.h>
main()
{
    for(int i = 0; i < 5; i++)
    {
        printf("%d/n", i);
    }
    //printf("%d", i); //这句不能写，否则会报错找不到变量
    if (1)
    {
        int j = 2;
        printf("j is %d/n", j);
    }
    //printf("%d", j);  //这句不能写，否则会报错找不到变量
    {
        int k = 3;
    }
    //printf("%d", k);  //这句不能写，否则会报错找不到变量
}

前面测试完 js 的var和 python 之后一测试C语言，就忽然感觉C语言好严格，和 js 的let一样，只要一出大括号就不行了。

不过我感觉我好像本来意识里就知道的，只是平时没太刻意注意这个问题。

java中声明变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public class Test {
    public static void main(String[] args) {
        for (int i = 0; i < 3; i++) {
            System.out.println(i);
        }
		//System.out.println(i); //报错找不到变量
        if (true) {
            int j = 1;
        }
		//System.out.println(j); //报错找不到变量
        {
            int k = 0;
        }
		//System.out.println(k);  //报错找不到变量
    }
}

我猜java跟c应该是差不多的，测试发现的确如此

总结

经过测试发现：

Js中的var关键字声明的变量、python声明的变量，变量作用域相对宽泛，在函数级别。

而Js中的let关键字声明的变量、和C语言、Java一样，变量作用域相对更小，在代码块级别。

变量声明语言 / 方式 变量作用域
javaScript var关键字 函数级别
javaScript let关键字 代码块级别
python 函数级别
c 代码块级别
java 代码块级别

有一个小发现，javaScript和python是脚本语言，c和java是编译型语言，JavaScript在ES6之前是没有let关键字的，所以个人感觉一般编译型编程语言的变量作用域范围更可能是代码块级别，而脚本语言的变量作用域范围更可能是函数级别。通常编译型语言比脚本语言给人一种更加严谨的感觉，可能这也算原因之一。