JavaScript做用域原理（二）——预编译

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

 

1、变量执行以前，会被赋为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。

 

2、函数定义式和函数表达式的不一样

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

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

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

 

3、以段为处理单元

<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，分别输出不一样的内容，后一个没有将前面一个的内容覆盖掉。

 

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

 

修改记录：

2014.9.29　　修改以段为处理单元的事例代码。

 

demo下载：

http://download.csdn.net/detail/loneleaf1/7983577 

2014.9.29 demo下载：

http://download.csdn.net/download/loneleaf1/7989605

 

参考资料：

http://www.laruence.com/2009/05/28/863.html Javascript做用域原理

http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html JavaScript 开发进阶：理解 JavaScript 做用域和做用域链

http://www.cnblogs.com/zxj159/archive/2013/05/30/3107923.html Javascript之匿名函数(模仿块级做用域)

http://www.web-tinker.com/article/20331.html try-catch语句的“伪块做用域”

http://msdn.microsoft.com/zh-cn/library/bzt2dkta%28v=vs.94%29.aspx 变量做用域 (JavaScript)

http://www.cnblogs.com/rubylouvre/archive/2009/08/21/1551270.html javascript变量的做用域

http://www.nowamagic.net/librarys/veda/detail/896 深刻浅出JavaScript变量做用域