javascript中的预编译问题

Js作为脚本语言,可以不需要编译直接运行,但遇到类似变量或者函数同名,预编译方面的知识可以帮助我们更好解决问题.

示例:

这是一段js中普通的函数调用代码

<script>
1.    //var demo=undefined
    
    
2.    demo(1,2);
3.    function demo(a,b){
4.        console.log(b);
5.    }
6.    var demo = function(a,b){
7.        console.log(a);
8.    };
9.    demo(4,3);
</script>

结果输出的是什么呢?

控制台输出的是2和4

原因如下

第一步:当一个<script>出现的时候,v8解释器先扫描所有的代码,寻找所有代码中哪里有var,先把var提出来,凡是有var的先拿出来,这叫预编译.还没执行之前,还没加载整个文档之前,v8解释器在加载当前页面包体的时候,先去判定有没有var,有var就把var后面那个变量拿出来先付undefined,也就是说,页面加载前,它先扫描到了第6行的var demo,执行的第一句话是var demo = undefined,也就是第一行的代码,这个demo在栈里,而当前的function还没有被加载到内存.

第二步:然后它扫描var以后,开始找谁是function,注意,是谁是function而不是谁是function的表达式,这两者是有区别的,function demo(){}为函数声明,而var demo=function demo(){}为变量赋值.function本身是加载到堆里的,在内存堆里面,它是先被加载执行的,所以第二步是加载function demo(a,b).

第三步:执行demo(1,2),因为我先加载了function,后面已经找到demo了,输出2.

第四步:然后向下执行,因为在开始时demo已经被赋为undefined了,那时demo是在栈里,第6行代码就相当于把=后面那一大坨代码塞到栈里了,但为什么它在栈里还能被执行,这个就是v8帮你做的.然后此时的function会把上面第三行的堆里的function里的入口地址直接覆盖掉了,所以下面的demo(4,3)调用的不再是第一个function了,而是第六行的function.输出2和4