IT虾米网

JS预解析机制详解

admin 2018年05月29日 编程语言 167 0

在浏览器中是如果解析JS的呢
一、预解析
 “JS解释器”会在JS代码中去找一些东西,比如,关键字var,function和参数
 找到var的时候,就会把变量存在一个仓库中,并且这个是变量为undefined
 找到function的时候 就会把整个代码块都存在一个变量中
 例如:

 var a = 1;
 function b() {alert(1)};

 预解析:先把a存在仓库中,并且这个是a是undefined;
 把b也存在仓库中,这个时候,b = function b() {alert(1)};
 还有一个点需要注意的是,在预解析的时候,如果重名了怎么办
 如果重名了,那么“JS解释器”不会在意你声明变量或函数的上下位置,它只会看你有没有值,没有值的变量会被有值的变量覆盖
 如果两个都有值,那么就是后面覆盖前面的
 记住,这个是JS是不会执行任何代码,这个阶段只是存值的过程
二、执行代码
 “JS解释器”逐行解读代码,
 表达式会去修改“仓库”的值,而函数声明却不会(这点需要注意)
 所有的值都是去“仓库”中去拿的,不管是函数还是变量,如果“仓库”中没有值就会报错;

alert(a); //a(){alert(4)}
var a = 1; 
alert(a); //1
function a(){alert(2)};
alert(a); //1
var a = 3; 
alert(a); //3
function a(){alert(4)}
alert(a); //3
a(); //报错

我们怎么来理解这个过程呢?
第一步,首先是预解析
1)遇到var a = 1;这个时候早就在仓库中存一个 a = undefined;
2)遇到了function a(){alert(2)}; 在仓库中存一个 a = function a(){alert(2)};
可是这个时候重名了,还记得怎么做的吗,重名了以后,有值的覆盖没有值的不管顺序,所以这个时候

a = function a(){alert(2)};

3)遇到了var a = 3;这个时候早就在仓库中存一个 a = undefined;a没有值,又重名了,所以这个时候
a还是等于function a(){alert(2)};
4)遇到了function a(){alert(4)};在仓库中存一个 a = function a(){alert(4)};这个时候
重名了,两个都有值,所以后面覆盖前面的,得到 a = function a(){alert(4)}
第二步,逐行解读代码

1)alert(a);到仓库去中找a,得到function a(){alert(4)};
2)var a = 1;这是一个表达式,表达式会修改仓库中的值,所以这个时候仓库中的值为 a = 1;
3)alert(a) 得到1
4)function a(){alert(2)};函数声明不会修改仓库中的值,所以忽略
5)alert(a) 得到1
6)var a = 3;这是一个表达式,表达式会修改仓库中的值,所以这个时候仓库中的值为 a = 3;
7)alert(a) 得到3
8)function a(){alert(4)};函数声明不会修改仓库中的值,所以忽略
9)alert(a) 得到3
10)a(); 仓库中a=3;不是一函数,所以报错


发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

“菜鸟”程序员和“大神”程序员差距在哪里详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。