JS高级——变量提升

JS执行过程

1、首先是预解析：预解析过程最重要的是提升，在JavaScript代码在预解析阶段，会对以var声明的变量名，和function开头的语句块，进行提升操作

2、执行操作

全局中解析和执行过程

<script>

    console.log(a);//undefined===>window.a

    console.log(b);//b is not defined

    console.log(fn1);//会打印函数===>window.fn1

    console.log(fn2);//undefined===>window.fn2

    var a = 1;

    b = 2;

    function fn1() {

        console.log('函数1');

    }

    var fn2 = function () {

        console.log('函数2');

    }

</script>

<script>

    var a;

    console.log(window);

</script>

<script>

    var a = 1;

    console.log(window);

</script>

上述例子有变量有函数（在全局作用域下）：

1、对于有var声明的函数，就等同于window.a，相当于在js第一次扫描代码时候（预解析），给window添加了一个a的属性，但是没有赋值，所以打印结果是undefined

2、对于没有var声明的函数，在js第一次扫描代码时候（预解析）不会给windouw添加任何属性，所有会直接报错

3、对于以function开头的函数，就等同于window.fn1，相当于在js第一次扫描代码时候（预解析），给window添加了一个fn1的属性，而且是直接赋值的（函数的引用），所以打印结果是一个函数

4、对于没有以function开头的函数（也就是函数表达式），其过程相当于var a的过程，在js第一次扫描时（预解析），给window添加了一个fn2的属性，但是没有赋值，所以打印结果是undefined

命名冲突

<script>

    console.log(f);//打印函数

    var f = 1;

    function f(){

        console.log('foodoir');

    }

</script>

<script>

    console.log(f);//打印函数

    function f(){

        console.log('foodoir');

    }

    var f = 1;

</script>

<script>

    console.log(f);//undefined

    var f = 1;

    var f = 2;

</script>

<script>

    console.log(f);//打印第二个函数

    function f(){

        console.log('foodoir');

    }

    function f(){

        console.log('hello world');

    }

</script>

1、函数与变量命名冲突时，变量会被直接忽略，保留的永远的都是函数

2、函数与函数命名冲突时，最后的函数会替换之前的函数

3、变量与变量命名冲突时，永远都是undefined

函数中的解析与执行过程

<script>

    function f(a, b) {

        alert(a);

        alert(b);

        var b = 100;

        function a() {

        }

    }

    f(1, 2);//依次弹出function a(){}以及2

</script>

<script>

    function f(a, b) {

        alert(a);

        alert(b);

        var b = 100;

        function a() {

        }

    }

    f(1);//依次弹出function a(){}以及undefined

</script>

函数中的解析过程与全局类似

1、在第一次扫描js代码时，首先会将a变量提升，但是扫描到最后发现有函数a，这里有命名冲突，那么就会直接将变量忽略

2、b变量没有命名冲突，但是第一次扫描后，b只是提升并没有赋值，所以上面代码段一中，正式执行代码的时候就会弹出2

巴特西

JS高级——变量提升

最新文章

热门文章