JavaScript作用域原理——预编译

JavaScript是一种脚本语言, 它的执行过程, 是一种翻译执行的过程。并且JavaScript是有预编译过程的，在执行每一段脚本代码之前, 都会首先处理var关键字和function定义式（函数定义式和函数表达式）。

 

一、变量执行之前，会被赋为undefined

<p id="scope2" style="color:red"></p>

　　　　 function echo(p, html) {            p.innerHTML += html + '<br/>';        }　　　　 var pscope2 = document.getElementById('scope2');        echo(pscope2, typeof param); //结果:undefined        var param = 'defined';        echo(pscope2, typeof param); //结果:string

在调用函数执行之前， 会首先创建一个活动对象，然后搜寻这个函数中的局部变量定义和函数定义，变量的值会在真正执行的时候才计算，此时只是简单的赋为undefined。

 

二、函数定义式和函数表达式的不同

　　　　 echo(pscope2, typeof scope2); //结果:function        echo(pscope2, typeof func); //结果:undefined        function scope2() { //函数定义式        };        var func = function() { //函数表达式        };        echo(pscope2, typeof func); //结果:function

对于函数定义式， 会将函数定义提前。而函数表达式，会在执行过程中才计算。

 

三、以段为处理单元

<script type="text/javascript">　　　　echo(pscope2, typeof scope_next2);//结果:undefined</script><script type="text/javascript">        function scope_next2() {        };</script>

<script type="text/javascript">　　　　function scope_next2() {//以段为处理单元            pscope2.innerHTML += 'in first scope_next2<br/>';        };        //echo(pscope2, typeof scope_next2);//结果:undefined        scope_next2();</script><script type="text/javascript">　　　　 var pscope2 = document.getElementById('scope2');        function scope_next2() {            pscope2.innerHTML += 'in second scope_next2<br/>';        }        scope_next2();</script>

两个同名的函数scope_next2，分别输出不同的内容，后一个没有将前面一个的内容覆盖掉。

 

对预编译的理解上可能还有些问题，欢迎大家来指正。