今天学习了有关于js作用域的知识,了解js作用域,可以让我们清楚地知道每行代码它是怎样运行的,话不多说,进入正题。
当代码运行在浏览器中时,解析器负责解析,这就会涉及到有关作用域的问题。当代码进入了<script>标签或者一个function函数里面的时候就进入一个作用域,一旦进入到作用域之后就会执行两个步骤:
1、js预解析
去找var, function,方法参数
找到之后就会建立一个仓库,遇到var就会把变量赋值为undefined,然后放在仓库中;遇到function就会就会把function整个函数放在仓库里面。
2、js代码逐行执行
找表达式(++,--,+*,+/等表达式),找到之后就会修改预解析的内容
说得有些抽象,举个例子:
console.log(a);
var a=1;
function a(){alert(2);}
console.log(a);
var a=3;
console.log(a);
function a(){alert(4);}
console.log(a);
a();
这段代码的执行结果是:
代码执行的顺序是这样的:
1、预解析:
1)var =1--------->遇到var,a=undefined
2)function a(){alert(2);}----------->遇到function,整个函数放在仓库里面,现在仓库有a=undefined和
function a(){alert(2);}注意:当变量的名称和方法的名称一致的时候,会显示方法的名称,隐藏变量的名称。现在仓库只显示function a(){alert(2);}
3)var a=3;----------->a=undefined和函数名相同,还是只显示函数
4)function a(){alert(4);}----------->覆盖function a(){alert(2);}
最终仓库只显示function a(){alert(4);}
2、js代码逐行执行
console.log(a);----------->
输出function a(){alert(4);}
var a=1;------------------>
修改内容,内容为1
function a(){alert(2);}
console.log(a);---------->
输出1
var a=3;----------->
修改内容,为3
console.log(a);----------->
输出3
function a(){alert(4);}
console.log(a);------------>
输出33
a();------------->
a未定义
另外一种情况是作用域套作用域,结果和现在的结果就不一样了,例如下面这种情况:
var a=1;
function fn1(){
alert(a);
var a=2;
}
fn1(); //新的作用域
console.log(a);
记住:如果嵌套里面没有var 或方法参数,就会去上一级找
这题的解题步骤如下:
1、预解析
1)var a=1------->a=undefined
2)function fn1(){alert(a);var a=2;}------------>function fn1(){alert(a);var a=2;}
因为现在仓库变量名和函数名不一样,现在仓库里有a=undefined和function fn1(){alert(a);var a=2;}
2、js代码逐行执行
var a=1; ----------->a=1
function fn1(){
alert(a);---------->预解析之后,a=undefined
var a=2;
}
fn1(); ------------->新的作用域,就会预解析fn1()
var a=2---------->a=undefined
console.log(a);------->1