忘记var的影响

使用var声明的全局变量和没有使用var生成的全局变量还有一个区别在于删除：

使用var声明创建的全局变量不能被删除

没有使用var声明的全局变量可以被删除

这说明没有使用var声明生成的全局变量不是真正的变量，他们只是全局对象的属性。属性可以通过delete删除，但是变量不行：

// define three globals
var global_var = 1;
global_novar = 2; // antipattern
(function () {
   global_fromfunc = 3; // antipattern
}());
 
// attempt to delete
delete global_var; // false
delete global_novar; // true
delete global_fromfunc; // true
 
// test the deletion
typeof global_var; // "number"
typeof global_novar; // "undefined"
typeof global_fromfunc; // "undefined"

在ES5的严格模式下，给一个为声明的变量赋值会报错。

读取全局对象

在浏览器中，你可以通过window变量来读取全局对象（除非你在函数内部重新定义了window对象）。但在有的环境中，可能不叫window，那么你可以使用下面的代码来获取全局对象：

var global = (function(){
     return this;
})();

这样可以获取到全局对象的原因是在function的内部，this指向全局对象。但是这在ES5的严格模式下会不起作用，你需要适配一些其他模式。当你开发自己的库的时候，你可以把你的代码封装在一个立即函数中，然后将this作为一个参数传进来。

单个var模式

在你的代码的顶部只是用一个var关键字，会有以下的好处：

• 对于所有需要的变量，在一个地方就可以全部看到
• 避免使用一个未定义的变量
• 帮助你记忆声明的变量，减少全局变量
• 更精简的代码

书写很简单：

function func() {
   var a = 1,
       b = 2,
       sum = a + b,
       myobject = {},
       i,
       j;
   // function body...
}

通过一个var和逗号来声明多个变量。在声明的时候给变量赋默认值也是不错的做法，可以避免一些逻辑错误，提高代码的可读性。而后你阅读的代码的时候也可以根据变量的默认值来方便的猜测变量的用途。

你也可以在声明变量的时候做一些实际的工作，比如sum = a + b;另外，在操作DOM元素的时候，你也可以把DOM元素的引用保存在一个变量中：

function updateElement() {
   var el = document.getElementById("result"),
       style = el.style;
   // do something with el and style...
}

滥用了的var

JavaScript允许你在函数内部有多个var语句，但是却都表现的如同在函数的顶部声明一样。这个特性在你使用一个变量然后在后面又声明了这个变量时会导致一些奇怪的逻辑问题。对于JavaScript来说，只要变量在同一个作用域，那么就认为是声明了的，就算是在var语句之前使用也一样。看看这个例子：

myname = "global"; // global variable
function func() {
    alert(myname); // "undefined"
    var myname = "local";
    alert(myname); // "local"
}
func();

在这个例子中，或许你期望第一次会弹出global，第二次弹出local。因为第一次的时候没有还没有使用var声明myname，这是应该是全局变量的myname，第二次声明了，然后alert之后应该是local的值。而事实上不是这样的，只要你在函数中出现了var myname，那么js就认为你在这个函数中声明了这个变量，但是在读取这个变量的值的时候，因为var语句还没有执行，所以是undefined，很奇怪的逻辑吧。上面的代码相当于：

myname = "global"; // global variable
function func() {
   var myname; // same as -> var myname = undefined;
   alert(myname); // "undefined"
   myname = "local";
   alert(myname); // "local"
}
func();

我们来解释一下这个现象，在代码的解析中，分两个步骤，第一步先处理变量函数的声明，这一步处理整个代码的上下文。第二步就是代码的运行时，创建函数表达式以及未定义的变量。实际上，我们只是假设了这个概念，这并不在ECMAScript的规范中，但是这个行为常常就是这样解释的。

出处：rockux
责任编辑：bluehearts

上一页 如何编写高质量的Javascript代码 [2] 下一页 如何编写高质量的Javascript代码 [4]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。