JS 05 - 变数宣告

大家好！

今天我们就要正式介绍变数的宣告方式了！
我们进入今天的主题吧！

宣告沿革

JavaScript 目前有 3 种宣告方式，就是昨天提到的 var、const 和 let。
其中的 const 和 let 就是为了解决旧版 JavaScript 问题而诞生的宣告方式。

事实上，ES6 问世前，宣告变数一直是 var 的工作，当时也不能宣告常数，因此造成许多编写上的不便：

1. 变数容易被污染
2. 全域变数会被定义为 window 的属性
3. 了解更多

宣告差异

接下来将会示范宣告方式的差异：

var

var 是基於函式来区分作用域。

var a = 0;
{
    var a = 1;
    console.log(a); // 1
}
console.log(a); // 1

a = 0 和 a = 1 位於相同作用域，因此 a = 1 会覆盖 a = 0 的宣告。

var b = 0;
(function () {
    var b = 1;
    console.log(b); // 1
})();
console.log(b); // 0

b = 0 和 b = 1 位於不同作用域，因为 b = 1 位於函式内。

const 和 let

const 和 let 是基於区块表示式（大括号）来区分作用域。

let c = 0;
{
    let c = 1;
    console.log(c); // 1
}
console.log(a); // 0

c = 0 和 c = 1 位於不同作用域，因为 c = 1 位於区块内。

宣告应用

接下来会将宣告方式应用於回圈：

var

for (var i = 0; i < 2; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000);
}

// 2
// 2

怎麽会这样？不应该是出现 0 和 1 吗？
其实结果没有错，因为上方的回圈有点像是下方的情况：

{
    {
        var i = 0;
        setTimeout(function () {
            console.log(i);
        }, 1000);
    }
    {
        var i = 1;
        setTimeout(function () {
            console.log(i);
        }, 1000);
    }
    {
        var i = 2;
        /* i < 2 === false */
    }
}

当计时器内的函式执行前，i 已经更新到 2了，又因为 var 宣告的变数只会於函式区分作用域，因此所有区块的 i 将会一起更新，当然函式呼叫的 i 也只能是 2 了。

let

for (var i = 0; i < 2; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000);
}

// 0
// 1

这样就能出现我们期待的结果了！
上方的回圈有点像是下方的情况：

{
    {
        let i = 0;
        setTimeout(function () {
            console.log(i);
        }, 1000);
    }
    {
        let i = 1;
        setTimeout(function () {
            console.log(i);
        }, 1000);
    }
    {
        let i = 2;
        /* i < 2 === false */
    }
}

尽管计时器的函式是在 i 更新到 2 後才执行，但是因为 let 宣告的变数会於区块表示式区分作用域，因此每个区块的 i 都不会互相影响，也无法呼叫其他区块的 i，当然函式呼叫的 i 就是相同区块中的 i 了。

如果回圈有计数器，请记得不能使用 const！

差不多也到尾声了。
如果对文章有任何疑问，欢迎於下方提问和建议！
我是 Felix，我们明天再见！