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

 

<p ></p>
JavaScript作用域原理——预编译
     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
JavaScript作用域原理——预编译

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

 

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

JavaScript作用域原理——预编译
     echo(pscope2, typeof scope2); //结果:function
        echo(pscope2, typeof func); //结果:undefined
        function scope2() { //函数定义式

        };
        var func = function() { //函数表达式
        };
        echo(pscope2, typeof func); //结果:function
JavaScript作用域原理——预编译

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

 

三、以段为处理单元

JavaScript作用域原理——预编译
<script type="text/javascript">
    echo(pscope2, typeof scope_next2);//结果:undefined
</script>
<script type="text/javascript">
        function scope_next2() {

        };
</script>
JavaScript作用域原理——预编译
JavaScript作用域原理——预编译
<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>
JavaScript作用域原理——预编译

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

 

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

相关文章:

  • 2022-02-25
  • 2022-03-14
  • 2022-12-23
  • 2022-12-23
  • 2021-06-11
  • 2021-11-07
  • 2022-12-23
猜你喜欢
  • 2022-02-01
  • 2020-03-18
  • 2019-07-20
  • 2022-12-23
  • 2022-12-23
  • 2021-06-30
相关资源
相似解决方案