先来看看下面的截图(截图来自廖雪峰大神官网的JavaScript教程)
正如上面所说,过量使用全局变量最大的坏处是污染全局,可能在未来造成不可预知的BUG,并且难以维护和扩展。
正所谓实践出真知,亲手去实践,才能加深理解。为了证实上面所说,我写了一个简单测试demo
html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script src="js/a.js"></script> <script src="js/b.js"></script> <script> doAdd1(); doAdd2(); </script> </body> </html>
a.js
var x = 1,y = 2; function doAdd1() { console.log(x + y); }
b.js
var x = 2,y = 2; function doAdd1() { console.log(x + y); }
按理说,执行上面方法以后,结果应该分别是:3 和 4,但结果却都是4,如下图
结果证明了上述所说,全局变量会污染全局,那应该怎么避免呢?
按照上面的例子,最简单粗暴的方法是把变量定义在function里面,这样就变成了某个方法的局部变量,如下
function doAdd1() { var x = 1,y = 2; console.log(x + y); }
另外,还可以用立即执行函数包装一下,所有“全局”变量就变成了匿名函数内部的局部变量
(function(){ var x = 1,y = 2; console.log(x + y); })()