先说结论
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 引用了<<代码之髓>>;
如果你觉得我的文章对你有用, 希望能给些改进的建议或者打个"喜欢" _
