关于"JavaScript变量作用域"的试验

先说结论

JavaScript 中, 强烈建议声明变量时使用 var.

不使用 var 似乎也可以声明变量, 但是本质上是有区别的:

• 带 var 表示"在当前作用域下声明变量, 并且赋值";
• 不带 var 则会冒泡寻找(由内往外寻找)需要赋值的对象, 从而会污染全局变量;

PS. 如果要了解本质原因, 可以参考 <<代码之髓>> 的第 7 章:
本质原因是 JavaScript 把用 var 声明的变量视为"静态作用域", 而把没有任何声明的变量视为"全局作用域".

试验 01 -- 用var声明变量

window.str = 'GuangDong';

function t1(){
    var str = 'GuangZhou';
    function t2(){
        var str = 'FoShan';
        alert(str);
    }
    t2();
}

t1();
alert(window.str);

输出结果:

FoShan
GuangDong

试验 02 -- 冒泡寻找

window.str = 'GuangDong';

function t1(){
    var str = 'GuangZhou';
    function t2(){
        alert(str);
    }
    t2();
}

t1();
alert(window.str);

输出结果:

GuangZhou
GuangDong

分析:
t2()函数里面的str变量没用var, 所以只是"赋值", 会往外冒泡寻找需要赋值的变量.
发现t1()函数的var str = 'GuangZhou', 所以alert('GuangZhou')

做为对比, PHP如果没有声明str, 会报错:

$str = 'GuangDong';

function t1(){
    $str = 'GuangZhou';
    function t2(){
        echo $str;
    }
    t2();
}

t1();

这个PHP的demo会报错:

PHP Notice: Undefined variable

试验 03 -- 冒泡寻找

window.str = 'GuangDong';

function t1(){
    function t2(){
        alert(str);
    }
    t2();
}

t1();
alert(window.str);

输出结果:

GuangDong
GuangDong

分析:
alert(str)在t2()内部找不到str变量, 冒泡往外寻找,
在t1()也找不到str变量, 继续冒泡往外寻找,
发现全局变量window.str,
所以输出GuangDong.

试验 04 -- 全局变量被污染

window.str = 'GuangDong';

function t1(){
    function t2(){
        str = 'FoShan';
        alert(str);
    }
    t2();
}

t1();
alert(window.str);

输出结果:

FoShan
FoShan

分析:
t2()里面的str变量没有使用var, 所以会冒泡往外寻找, 一直找到window.str, 将其赋值为FoShan.
所以输出全局变量alert(window.str)时, 输出FoShan.

参考文章

• <<代码之髓>> 第 7 章 -- 名字和作用域

文章历史

• 2016/12/21 (第一次发布);
• 2017/07/13 引用了<<代码之髓>>;

如果你觉得我的文章对你有用, 希望能给些改进的建议或者打个"喜欢" ^_