让前端飞Web前端之路前端开发那些事

说说 ES6 的块级作用域

2019-08-03  本文已影响1人  deniro

1 问题

先说说没有块级作用域,可能产生的问题。

1.1 内层变量覆盖外层变量

var temp=1;

function f(){
    console.log(temp);
    if(false){
        var temp='字符串变量';
    }
}
f()

运行结果:

undefined

因为变量提升,导致 if 语句体中的变量 temp 覆盖了外层变量 temp。

1.2 用于循环的计数变量,其实是全局变量

var s = 'es6';
for (var i = 0; i < s.length; i++) {
    s[i];
}
console.log('i=' + i);

运行结果:

i=3

2 块级作用域

ES6 通过 let 来实现块级作用域。

function f1() {
    let i = 1;

    if (true) {
        let i = 11;
    }
    console.log(i);
}

f1();

运行结果:

1

外层的变量 i,不受内层变量 i 的影响。

使用 {...} 结构,就可以标注出一个块级作用域。如果一个变量在外层没有定义,那么就会抛出 ReferenceError: xxx is not defined 错误。请看下例:


{
    {
        let str = '你好'
    }
    console.log(str);
}

运行结果:

console.log(str);
^
ReferenceError: str is not defined

内层作用域可以定义与外层作用域同名的变量,而不相互影响:

{
    let str='你好';
    {
        let str = '你好吗';
        console.log('内层:'+str);
    }
    console.log('外层:'+str);
}

运行结果:

内层:你好吗
外层:你好

有了块级作用域,我们就不需要 IIFE(立即调用函数表达式)啦!IIFE 是一个在定义时就会立即执行的 JavaScript 函数。以前没有块级作用域,我们都是使用 IIFE 来模拟块级作用域。

上一篇 下一篇

猜你喜欢

热点阅读