一个js变量以及其作用域的源码示例

今天遇到了一个问题，抽象出来的代码如下：

var zoom=13;
function setZoom(){
zoom=14;
}
function displayZoom(){

this.setZoom();
alert(zoom);
var zoom=1500;
this.changeZoom();
alert(zoom);
}

function changeZoom(){
this.zoom=++zoom;
}

执行结果

………………………………………………

…………………………

………………

………………

很诧异  undefined 1500

找找原因，是因为displayZoom()内部重新定义了zoom变量，去掉这个var

var zoom=13;
function setZoom(){
zoom=14;
}
function displayZoom(){

this.setZoom();
alert(zoom);
zoom=1500;
this.changeZoom();
alert(zoom);
}

function changeZoom(){
this.zoom=++zoom;
}

执行结果是

………………………………

……………………

……………………

14 1501

不诧异了

找了找解释：任何程序语言中变量的作用域都是一个很关键的细节。JS中变量的作用域相对与JAVA、C这类语言显得更自由，一个很大的特征就是JS变量没有块级作用域，函数中的变量在整个函数都中有效

简单的说

function displayZoom(){

this.setZoom();
alert(zoom);
var zoom=1500;
this.changeZoom();
alert(zoom);
}

这段代码，执行时，等同于

function displayZoom(){
var zoom;
this.setZoom();
alert(zoom);
zoom=1500;
this.changeZoom();
alert(zoom);
}

所以执行结果是：undefined 1500

p.s,为了避免上面的这类问题，因此在函数开始位置集中做函数声明是一个极力推荐的做法。

dml@2013.8.22