JavaScript中var与隐式全局变量的区别及作用域陷阱

JavaScript变量声明：var与隐式声明的区别

在JavaScript中，使用var关键字进行变量声明是基础操作，例如：var x = "XX";

相比之下，如果直接赋值如 y ="xxx"; 而未使用var声明，则构成了隐式全局变量声明。

这种写法存在潜在风险：当开发者意图使用已声明的变量x，却因拼写错误误写为y时，代码不会报错，而是隐式创建了一个新的全局变量y。在实际开发中，这类由拼写错误引发的隐式声明往往难以被即时发现。

此外，通过技术交流了解到，隐式声明还涉及另一个重要的作用域行为问题。

当在当前作用域内进行隐式赋值时，JavaScript引擎会沿着作用域链向上查找该变量。若当前及所有上层作用域中均未找到该变量的声明，引擎最终会在全局对象（即window对象）上创建并声明该变量。

隐式全局变量的作用域查找机制

具体表现如下：

 
window. y = "hello";
function func(){
y = "OH, NO!!!";
} 
func();
alert(window.y); //#=> display "OH, NO!!!"

上述示例表明，如果在任意一层级中存在隐式定义的变量，该变量将修改对应层级的变量值，而不会在window上生成新的独立变量。这种机制在封装复杂的代码中容易引发令人头疼的Bug。

嵌套函数中的变量覆盖陷阱

再看一个嵌套函数的例子：

 
var x = "window.x";
function a() {
var x = "a's x";
var b = function() {
var c = function() {
//no var!
x = "c's x:";
}; 
alert("before c run,the b.x:" + x);
c();
alert("after c run, the b.x:" + x);
}; 
alert("a.x is:" + x);
b();
alert("after b function runed, the a.x is:" + x);
}; 
alert("before a run, window.x:" + x);
a();
alert("after a run, window.x:" + x);

该示例构建了多层嵌套的作用域：window -> a -> b -> c。

在window和函数a中，变量x均通过var显式声明；函数b中未定义x；而在函数c中，由于未使用var，x被隐式声明。根据作用域链规则，该隐式声明的x最终修改了外层函数a中x的值，而非创建新的全局变量。

因此，在JavaScript编程中，务必养成习惯：声明变量时必须在前面加上var关键字，以避免隐式全局变量带来的作用域污染和潜在Bug。