JavaScript总结: javascript中使用var定义变量的变量提升问题

一、问题

我们知道当局部变量和全局变量同名时,局部变量会覆盖局部变量.

但是有时在实际应用JavaScript时,却会发现明明我给变量赋值了,为什么之后在函数调用的时候却输出变量是undefined.

同样遇到问题的我,发现了js中的坑 : 变量提升.

二、变量提升

我们先看一段js代码:

  var scope = "全局变量";
  function test()
  {
    document.writeln(scope + "<br >");
    var scope = "局部变量";
    document.writeln(scope + "<br >");
  }
  test();

运行结果:

按照我们正常的思路,输出应该是:

全局变量

局部变量

实际我们发现第一个输出是undefined,

这里我们就要理解JavaScript的变量提升机制.

所谓变量提升,指的是变量声明总会被解释器"提升"到函数的顶部.

即上面代码等价于

  var scope = "全局变量";
  function test()
  {
    var scope;
    document.writeln(scope + "<br >");
    var scope = "局部变量";
    document.writeln(scope + "<br >");
  }
  test();

这样我们就会明白为什么第一个输出是undefined了.

注意: 如果对于全局作用于范围的变量，var与不var是有区别的:

没有var的写法，其变量不会被提升。

比如下面两个程序，第二个会报错：

alert(a);
var a=1;
alert(a);
a=1;

分别运行结果:

总结:

变量提升就是var在函数内部使用的时候，在var定义变量的语句之前是访问不到变量的！ 所以避免预防的方法就是尽量不使用同名的变量名命名并且在函数头部定义变量并赋值。