深入理解JS变量提升和函数提升

1.作用域简介

作用域最大的用处：隔离变量，不同作用域下同名变量之间不会有冲突
作用域中变量值在执行过程中产生，而作用域却是在函数创建时确定了

作用域

2.变量提升

在ES6还没有出来的之前，JavaScript只有全局作用域和函数作用域，并没有块级作用域（一个{ }即为一个块级作用域）的概念。无论var声明的变量处于当前作用域的第几行，都会被提升到作用域的头部，并被初始化为undefined——变量提升

        console.log(global);    // undefined
        var global = 'global';
        console.log(global)     // global

        function fn() {
            console.log(a);     // undefined
            var a = 10;
            console.log(a);     // 10
        }
        fn();

之所以会有上面的结果是因为JS的变量提升导致的，上面的代码其实是这样执行的：

        var global;                // 变量提升，全局作用域范围内，此时只是声明并没有赋值
        console.log(global);      // undefined
        global = 'global';       // 此时才赋值
        console.log(global)     // global

        function fn() {
            var a;                 // 变量提升，函数作用域范围内，此时只是声明并没有赋值  
            console.log(a);       // undefined
            a = 10;              // 此时才赋值
            console.log(a);     // 10
        }
        fn();

3.函数提升

在JS中创建函数有两种方式函数声明和函数字面量，只有函数声明存在函数提升。

        console.log(fn1);   // function fn1 () {console.log('我是fn1')；}
        console.log(fn2);   // undefined
        function fn1 () {console.log('我是fn1')；}
        var fn2 = function() {
            console.log('我是fn2');
        }

因为函数声明的函数提升，导致上面的结果，上面的代码其实是这么执行的：

        function fn1() {
            console.log('我是fn1');
        }
        var fn2;
        console.log(fn1);                // function fn1 () {console.log('我是fn1')}
        console.log(fn2);               // undefined
        fn2 = function () {
            console.log('我是fn2');
        }
        console.log('***', fn2);         //  fn2 = function() {console.log('我是fn2');}

4.强化训练

        (function () {
            console.log(a);     // undefined
            a = 'aaa';
            var a = 'bbb';
            console.log(a);     // 'bbb'
        }
        )()

最后编辑于：2019.04.18 14:28:38