JS预解析机制详解编程语言

在浏览器中是如果解析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/7519.html