[ES2016] 中的 let 和块级作用域

yufei       3 年, 9 月 前       537

很长很长一段时间,我们声明一个 JavaScript 变量或常量的方法只有一种,但因为浏览器的实现有关,结果就有了三种方式

var name = 'yufei';   // 1. 官方正统,使用 var 关键字
window.sex = 'male` ; // 2. 特定于浏览器实现。
age = 30;             // 3. 浏览器默认存在的功能,此方法相当于 window.age;

如果你经常写 JavaScript,那么一定会碰到很多问题,也一定会收到很多高手的警告,比如

age=30 不管出现在哪里,都相当于在全局作用域下 ( window 作用域下 ) 声明了一个全局的变量,相当于 window.age=30

如果你在函数中使用 var name = 'yufei'; 就一定碰到过提权。就是所有的 var 的声明都会自动提到函数的入口处。

饱受痛苦的这么,然后,ECMAScript 2016 中终于带来了两个新的关键字 letconst ,前者用于声明不可变变量,后者用于声明常量。

let 关键字

let 关键字的用法非常类似于 var,但与 var 不同的是,let 声明的变量是块级作用域 ( block scoped ) ,只会存在于当前块中,而 var 声明的变量作用域是函数级别的 ( function scoped )

所谓的块级作用域,就是该变量只在从声明点开始的当前的块 {} 及所有子块 {} 中有效,超出了范围则无效,同时在内部声明的匿名函数中有效

范例: 块级作用域

例如下面的代码

{
    let name = 'yufei';
}
console.log(name);

运行结果为 undefined

因为输出语句在当前声明的块的外部,所以显示未定义

范例 2 : 子块级作用域

又如下面的代码

{
    let name = 'yufei';
    {
        console.log('in child block:',name);
    }
    console.log('in same block:', name);
}

输出结果如下

in child block: yufei
in same block: yufei

因为块级的作用域也包括子块级作用域

范例 3 : 内部函数

我们再来看看下面的代码,在当前作用域内声明了一个内部函数

{
    let name = 'yufei';
    {
        (function () {
            console.log('in internal function:',name);
        })();
    }

    function hello() {
        console.log('Hello:' + name);
    }

    hello();

}

输出结果如下

in internal function: yufei
VM69:10 Hello:yufei

块级作用域和函数级作用域

大家都知道,var 关键字声明的作用域是函数级别的,也就是 JavaScript 引擎会把一个函数中的所有块 ( 非另一个函数 ) 的 var 声明统统收纳到最近的函数的头部

例如下面的代码

function order(x, y) {
    if (x > y) { // (A)
        var tmp = x;
        x = y;
        y = tmp;
    }
    console.log(tmp===x); // 可行,而且还会正常输出
    return [x, y];
}
order(4,3);

输出结果为 false,返回结果为 [3, 4]

但如果我们把 var 换成 let 就会报错了

function order(x, y) {
    if (x > y) { // (A)
        let tmp = x;
        x = y;
        y = tmp;
    }
    console.log(tmp===x); // 不可行,提示 tmp 未声明
    return [x, y];
}
order(4,3);

报错结果如下

Uncaught ReferenceError: tmp is not defined

所以,如果要代码严谨,如果想再大型的项目中,请使用 let 代替 var 吧。

目前尚无回复
简单教程 = 简单教程,简单编程
简单教程 是一个关于技术和学习的地方
现在注册
已注册用户请 登入
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.