ES6中的变量和作用域

作者：大漠 日期：2017-07-23 点击：890
ES6
JavaScript学习笔记
会员专栏

特别声明：如果您喜欢小站的内容，可以点击年卡¥199.00元(原价: ¥598元)、季卡¥78.00元(原价: ¥168元)、月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!或添加QQ：874472854(^_^)

ES6提供了两种新的声明变量的方法：let和const，它们主要替换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

通过let和const创建块作用域

let和const创建的变量只存在块作用域，它们只存在于包围它们的最内层块中。下面的代码演示了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

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

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