预解析--变量声明提升和函数声明提升

1、JS引擎运行JS分为两步: 预解析和代码执行

(1) 预解析 js引擎会把js里面所有的 var 还有 function 提升到当前作用域的最前面 

(2) 代码执行按照代码书写的顺序从上往下执行

2、预解析分为变量预解析(变量声明提升)和 函数预解析(函数声明提升) 

(1) 变量声明提升:是把所有的变量声明提升到当前的作用域最前面,但不提升赋值操作 

(2) 函数声明提升:是把所有的函数声明提升到当前作用域的最前面,但不调用函数

例1-1:

<script>

    console.log(num);

</script>

结果:报错;变量未声明,直接打印。

例1-2:

<script>

    console.log(num); 

     var num = 10;

</script>

结果: undefined

代码执行分析:

    var num;

     console.log(num);

     num = 10;

相当于声明了一个变量,但是没有赋值。

例2-1:

<script>

    function fn(){

        console.log(10);

    }

    fn();

</script>

结果:正常

例2-2:

<script>

    fn();

    function fn(){

        console.log(10);

    }

</script>

结果:正常

例2-3:

 <script>

    fun(); 

    var fun = function() {

        console.log(10);

    }

</script>

结果:报错

代码执行分析:

var fun;

 fun();

fun = function() {

     console.log(10);

}

例3:

function fn(){

        console.log(a);     //f2

        var a = "hello";

        function a(){1};

        console.log(a);     //"hello"

        a = "world";

        function a(){2}

        console.log(a)      //"world"

    }

    fn();

    代码执行分析:

    function fn(){

        var a;

        function a(){1};

        function a(){2};

        console.log(a);     //f2

        a = "hello";

        console.log(a);     //"hello"

        a = "world";

        console.log(a)      //"world"

    }

    fn();

注意:赋值式创建函数时,函数提升之后,相当于声明了一个变量,所以无法调用函数。所以函数调用必须写在函数表达式的下面。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容