<style type="text/css"> <!-- p {text-indent:2em} --> </style>
关于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