第三小节:let和const理解

2017-12-05  本文已影响0人  Janicerant

        当你想声明的变量属于块级作用域,或者不想别人有意或无意地修改你声明的变量的时候,你这是可以用let和const来定义声明你的变量。接下来我们来看一下let和const更多的应用场景吧。
        首先我们谈一下利用let和const来代替立即执行函数(IIFE),我们都知道window变量中都有name这个属性,当我们利用var重新声明:var name = 'lucy' ; 的时候,会覆盖污染掉之前的name属性,这是因为变量name不在函数作用域中的时候属于全局变量,很容易污染全局作用域或者错误地修改了别人代码中已经使用的变量。为了避免这种情况,我们通常使用立即执行函数,使变量var私有化。如下图:

<script>
    (function () {
        var name = 'lucy';
    })();
</script>

        这个函数其实只是为了让这个变量变得私有化,没有任何意义。这不利于代码的可读性。这个时候呢,我们用let和const在块级作用域中也能达到这个效果。const变量此时只在这对{}中起作用,属于局部变量。如下图:

<script>
    {
        const name = 'lucy';
    }
</script>

        接下来我们再来看一下for循环场景中啦。

<script>
    for (var i=0;i<10;i++) {
        console.log(i);
        setTimeout(function(){
            console.log(`i:${i}`);
        }, 1000)
    }
</script>
        这个时候,在执行setTimeout这个函数的时候,会输出下图结果 image.png
这是因为var声明的变量是全局变量,下图的代码每执行完一次又会立刻执行下一次 image.png ,所以这个时候i的值已经变成l10,当 setTimeout函数执行的时候图上的for循环已经执行完了。为了有效地解决这个问题,把var变成let就行了。但是不能变成const哦,这是因为const变量不能重复声明。
下图为var变成let的结果:
image.png
上一篇 下一篇

猜你喜欢

热点阅读