Js中的（H0isting）机制及ES6中的let声明

提升机制：通过var声明的变量都会在当前作用域中提升到作用域顶部。
上代码

function getValue(isTrue) {

        if (isTrue) {

            var value = 'blue';

            return value;
        }
        else {

            console.log(value);

            return null;
        }
    }

当我们运行这行代码的时候

console.log(getValue(true));

图片.png

然后我们将true 变成 false

console.log(getValue(false));

理论上，我们的代码会报错，因为，我们会访问一个没有创建的变量，这会引起系统的报错

图片.png

系统并没有报错，而是给我们打印出了一个undefined

这是因为系统悄悄的将我们的声明提前了，我们的代码实际上是被改成了这样

    function getValue(isTrue) {

        var value;

        if (isTrue) {

            value = 'blue';

            return value;

        }
        else {

            console.log(value);

            return null;
        }
    }

在实际的运行中，我们的value变量在执行if语句之前就已经被创建了，但是，并没有赋值。所以我们在else是可以访问到value，因为value只是被创建了并没有赋值所以我们会显示一个undefined。而这就是声明提前。

换句话说就是，变量的声明被提至函数顶部，初始化操作依旧在原位置执行。

在ES6中为了强化变量生命周期，ES6引入块级作用域的概念，通过let声明不在让变量提前声明。

function getValue(isTrue) {

        if (isTrue) {

            let value = 'blue';

            return value;

        }
        else {

            console.log(value);

            return null;
        }
    }

我们让isTrue为false运行一次

图片.png

我们只改变了var关键字，就可以让变量value在if块中声明并赋值，如果isTrue为false，那么永远也不会声明并初始化变量value。

禁止重复声明相同变量!
在同一个作用域中，不可以通过var 和 let声明相同的变量

function getValue(isTrue) {

            var value = 'red';

            let value = 'blue';

            return value;
    }

图片.png

当然我们在不同的作用域中，就可以使用相同的变量名

 function getValue(isTrue) {

        var value = 'red';

        if (isTrue) {

            let value = 'blue';

            return value;

        }
        else {

            console.log(value);

            return null;
        }
    }

我们让isTrue 为真

图片.png

这里面存在两个value ，但是两个value的作用域不同，所以相同的名字可以在不同的作用域中重复声明。
值得注意的是，let 声明的变量value只能在if作用域中访问，出了这个作用域的的时候let声明的 value就被销毁掉。var 声明的value还可访问。