js预解析

2018-05-05  本文已影响0人  张鸽

首先来一个简单的代码:

<script>
    console.log(a);
    var a = 10;
    console.log(a);
    function a() {
        var b = 1;
    }
    console.log(a);
    var a = function() {
        var b = 2;
    };
    console.log(a);
</script>

那么结果是什么呢?
我本来以为是undefined、10、function a() { var b = 1; }、function() { var b = 2; }
但是结果却是这样的:



为什么会这样呢,是因为 js 在正常解析前先进行预解析,那么如何预解析呢?

在预解析时,会产生一个仓库,存储声明的变量和函数,如果变量或函数有同名的情况,则覆盖前面的,只留一个。在解析代码时,在这个仓库里找同名的变量或是函数

下面是我对上面例子的预解析过程的理解:
第一步对 var、function 提升:

    var a;
    var a;
    function a() {
        var b = 1;
    }
    console.log(a);
    a = 10;
    console.log(a);
    console.log(a);
    a = function() {
        var b = 2;
    };
    console.log(a);

第二步同名覆盖:

    function a() {
        var b = 1;
    }
    console.log(a);
    a = 10;
    console.log(a);
    console.log(a);
    a = function() {
        var b = 2;
    };
    console.log(a);

预解析后, js 会从上到下一行一行执行,遇到表达式时,如果表达式对变量进行修改,则修改预解析的值。就像上面的yu

总结:感觉自己要巩固基础

上一篇下一篇

猜你喜欢

热点阅读