关于 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