在浏览器中是如果解析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;不是一函数,所以报错
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/pnotes/7519.html