对Javascript局部变量的理解

关于 Javascript局部变量、块级作用域的理解

废话少说，直接上代码和注释。

var outer = function(){ var i=1; var inner = function(){ console.log(i);//由于下面if语句块中定义了局部变量i，这个变量的作用域属于inner函数，而此处i尚未赋值，因此值是undefined //var i=2; if(!i){//同上，此时i的值为undefined console.log(i);//此处仍然是undefined var i=3;//终于定义了 console.log(i);//此处输出3 } console.log(i); return i; }(); }(); undefined undefined 3 3

先简单说一说：HTML文件解析时，JS代码的运行顺序
如果一个文档流中包含多个script代码段（用script标签分隔的js代码或引入的js文件），它们的运行顺序是：
步骤1. 读入第一个代码段（js执行引擎并非一行一行地执行程序，而是一段一段地分析执行的）
步骤2.做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到步骤5
步骤3. 对var变量和function定义做“预解析”（永远不会报错的，因为只解析正确的声明）
步骤4. 执行代码段，有错则报错（比如变量未定义）
步骤5. 如果还有下一个代码段，则读入下一个代码段，重复步骤2
步骤6. 结束

step3中所谓的“预解析”，其实是在step2的语法分析阶段完成，并存储在语法树中。当执行到函数实例时，会将varDelcs和funcDecls从语法树中复制到执行环境的scriptObject上。

局部函数(f)运行时，会提前为其中的变量(i)分配空间而未执行到赋值语句(i=3)之前，显然变量的值是undefined ！…………

只要函数(f)中存在同名局部变量(i=3)，则外部变量的值在作用域链中被屏蔽。

把Javascript理解为一种设计简陋的语言，反而便于理解。

作为对照，请看下面一段代码：

var outer = function(){ var i=1; var inner = function(){ console.log(i);//输出1 //var i=2; if(i){//此时，i的值不再是undefined console.log(i);//输出1 //同上，注掉局部变量的声明 //var i=3; console.log(i);输出1 } console.log(i);输出1 return i; }(); }(); 1 1 1 1