ES6中的变量和作用域

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

ES6提供了两种新的声明变量的方法:letconst,它们主要替换ES5中使用var声明变量。

let

let工作类似于var,但是它声明的变量只在块作用域,也只存在于当前块作用域。var工作于函数作用域。

在下面的代码中,你可以看到let声明的变量tmp只在if块中用效:

function order(x, y) {
    if (x > y) {
        let tmp = x;
        x = y;
        y = tmp;
    }
    console.log(tmp === x); // => ReferenceError: tmp is not defined
    return [x, y];
}
order(5, 2);

const

const的工作方式类似于let,但是你声明的变量必须立即初始化,并且值是不能改变。

const foo; // => SyntaxError: Missing initializer in const declaration
const bar = 123;
bar = 456; // => TypeError: Assignment to constant variable.

由于for-of每次循环迭代创建一个绑定(一个变量的存储空间),所以循环内可以使用const声明变量:

for (const x of ['a', 'b']) {
    console.log(x);
}
// Output:
// => a
// => b

声明变量的方法

下面的表格概述了在ES6中可以声明变量的六种方法:

声明变量方法 提升 作用域 创建全局属性
var Declaration Function Yes
let TDZ Block No
const TDZ Block No
function Complete Block Yes
class No Block No
import Complete Module-global No

通过letconst创建块作用域

letconst创建的变量只存在块作用域,它们只存在于包围它们的最内层块中。下面的代码演示了const声明的变量tmp只存在于if语句块中:

function func() {
    if (true) {
        const tmp = 123;
    }
    console.log(tmp); // => ReferenceError: tmp is not defined
}

相比之下,var声明的变量是在函数作用域内:

function func() {
    if (true) {
        var tmp = 123;
    }
    console.log(tmp); // => 123
}

块作用域意味着你可以在函数内有隐藏变量(Shadow Variables):

function func() {
    const foo = 5;
    if (true) {
        const foo = 10;   // 隐藏在外面的变量`foo`
        console.log(foo); // => 10
    }
    console.log(foo);     // => 5
}

const创建不可变的变量

let创建的变量是可变的:

let foo = 'abc';
foo = 'def';
console.log(foo); // => def

常量,由const创建的变量,是不可变的 —— 你不能为它们分配不同的值:

const foo = 'abc';
foo = 'def';  // => TypeError: Assignment to constant variable.
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/es6-scoping-variables.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部