摘要：聲明會(huì)組織對(duì)變量綁定和對(duì)自生值的修改，這意味著聲明并不會(huì)組織對(duì)變量成員的修改。循環(huán)中的塊級(jí)綁定在此處仍然可被訪問輸出的結(jié)果并不是預(yù)期的值而是是因?yàn)槁暶鲗?dǎo)致的變量的提升。全局塊級(jí)綁定與不同于的另一個(gè)方面是在全局作用域上的表現(xiàn)。

var let const 之變量聲明

var 聲明與變量提升。

var提升如下:

function getValue(condition) {
if (condition) {
var value = "blue";
// 其他代碼
return value;
} else {
// value 在此處可訪問，值為 undefined
return null;
}
// value 在此處可訪問，值為 undefined
}

塊級(jí)聲明let

在一個(gè)函數(shù)內(nèi)部，

在一個(gè)代碼塊(由一對(duì)花括號(hào)包裹)內(nèi)部

如下所示:

function getValue(condition) {
if (condition) {
let value = "blue";
// 其他代碼
return value;
} else {
// value 在此處不可用
return null;
}
// value 在此處不可用
}

如果一個(gè)標(biāo)識(shí)符已經(jīng)在代碼內(nèi)部被定義，重復(fù)進(jìn)行l(wèi)et聲明會(huì)報(bào)錯(cuò)

var a = 30;
//報(bào)錯(cuò)
let a = 30;

var count = 30;
// 不會(huì)拋出錯(cuò)誤
if (condition) {
let count = 40;
// 其他代碼
}

// 有效的常量
const maxItems = 30;
// 語(yǔ)法錯(cuò)誤：未進(jìn)行初始化
const name;

const person = {
name: "Nicholas"
};
// 工作正常
person.name = "Greg";
// 拋出錯(cuò)誤
person = {
name: "Greg"
};

首先他們都是塊級(jí)聲明,這就意味著常量在聲明它們的語(yǔ)句塊外是無(wú)法被訪問的,并且聲明也不會(huì)被提升，示例如下:

if (condition) {
const maxItems = 5;
// 其他代碼
}
// maxItems 在此處無(wú)法訪問

它們?cè)诮y(tǒng)一級(jí)作用域中重復(fù)聲明時(shí)會(huì)導(dǎo)致拋出錯(cuò)誤

for (var i = 0; i < 10; i++) {
process(items[i]);
}
// i 在此處仍然可被訪問
console.log(i); // 10

輸出的結(jié)果并不是預(yù)期的值而是10;是因?yàn)関ar聲明導(dǎo)致的變量的提升。聰明的你肯定會(huì)想到使用塊級(jí)綁定來(lái)進(jìn)行變量聲明

for (let i = 0; i < 10; i++) {
process(items[i]);
}

console.log(i);

i在此處是不是會(huì)正常輸出呢，其實(shí)不會(huì)，在這個(gè)例子中會(huì)導(dǎo)致報(bào)錯(cuò)，為什么呢？因?yàn)閕在此處不可訪問。本例中的變量 i 僅在 for 循環(huán)內(nèi)部可用，一旦循環(huán)結(jié)束，該變量在任意位置都不可訪問。

我們?cè)趤?lái)看看一下代碼

var funcs = [];
for (var i = 0; i < 10; i++) {
funcs.push(function() { console.log(i); });
}
funcs.forEach(function(func) {
func(); // 輸出數(shù)值 "10" 十次
});

你原本可能預(yù)期這段代碼會(huì)輸出 0 到 9 的數(shù)值，但它卻在同一行將數(shù)值 10 輸出了十次。這是
因?yàn)樽兞?i 在循環(huán)的每次迭代中都被共享了，意味著循環(huán)內(nèi)創(chuàng)建的那些函數(shù)都擁有對(duì)于同一
變量的引用。在循環(huán)結(jié)束后，變量 i 的值會(huì)是 10 ，因此當(dāng) console.log(i) 被調(diào)用時(shí)，
每次都打印出 10 。

為了修正這個(gè)問題，開發(fā)者在循環(huán)內(nèi)使用立即調(diào)用函數(shù)表達(dá)式（IIFEs），以便在每次迭代中
強(qiáng)制創(chuàng)建變量的一個(gè)新副本，示例如下：

var funcs = [];
for (var i = 0; i < 10; i++) {
funcs.push((function(value) {
return function() {
console.log(value);
}
}(i)));
}
funcs.forEach(function(func) {
func(); // 從 0 到 9 依次輸出
});

let 聲明通過有效模仿上例中 IIFE 的作用而簡(jiǎn)化了循環(huán)。在每次迭代中，都會(huì)創(chuàng)建一個(gè)新的
同名變量并對(duì)其進(jìn)行初始化。這意味著你可以完全省略 IIFE 而獲得預(yù)期的結(jié)果，就像這樣

var funcs = [];
for (let i = 0; i < 10; i++) {
funcs.push(function() {
console.log(i);
});
}
funcs.forEach(function(func) {
func(); // 從 0 到 9 依次輸出
})

我們是否會(huì)想到這個(gè)問題：為什么同樣的代碼使用let聲明會(huì)導(dǎo)致不一樣的結(jié)果呢?
在循環(huán)中l(wèi)et聲明每次都創(chuàng)建了一個(gè)新的i變量，因此在循環(huán)內(nèi)部創(chuàng)建的函數(shù)獲得了各自的i副本,而每個(gè)i副本的值都會(huì)在每次的循環(huán)迭代聲明變量的時(shí)候確定了

var funcs = [],
object = {
a: true,
b: true,
c: true
};
for (let key in object) {
funcs.push(function() {
console.log(key);
});
}
funcs.forEach(function(func) {
func(); // 依次輸出 "a"、 "b"、 "c"
});

本例中的 for-in 循環(huán)體現(xiàn)出了與 for 循環(huán)相同的行為。每次循環(huán)，一個(gè)新的 key 變量綁
定就被創(chuàng)建，因此每個(gè)函數(shù)都能夠擁有它自身的 key 變量副本，結(jié)果每個(gè)函數(shù)都輸出了一個(gè)
不同的值。而如果使用 var 來(lái)聲明 key ，則所有函數(shù)都只會(huì)輸出 "c" 。
let 聲明在循環(huán)內(nèi)部的行為是在規(guī)范中特別定義的，而與不提升變
量聲明的特征沒有必然聯(lián)系。事實(shí)上，在早期 let 的實(shí)現(xiàn)中并沒有這種行為，它是后來(lái)
才添加的。

雖然es6沒有明確的規(guī)范我們不能在for循環(huán)中使用const聲明，然而它會(huì)根據(jù)循環(huán)方式的不同而有不同的行為,我們可以在初始化時(shí)使用const，但是當(dāng)循環(huán)試圖改變變量的值的時(shí)候會(huì)拋出錯(cuò)誤,例如:

var funcs = [];
// 在一次迭代后拋出錯(cuò)誤
for (const i = 0; i < 10; i++) {
funcs.push(function() {
console.log(i);
});
}

在此代碼中， i 被聲明為一個(gè)常量。循環(huán)的第一次迭代成功執(zhí)行，此時(shí) i 的值為 0 。在
i++ 執(zhí)行時(shí)，一個(gè)錯(cuò)誤會(huì)被拋出，因?yàn)樵撜Z(yǔ)句試圖更改常量的值。因此，在循環(huán)中你只能使
用 const 來(lái)聲明一個(gè)不會(huì)被更改的變量
而另一方面， const 變量在 for-in 或 for-of 循環(huán)中使用時(shí)，與 let 變量效果相同。因
此下面代碼不會(huì)導(dǎo)致出錯(cuò)：

var funcs = [],
object = {
a: true,
b: true,
c: true
};
// 不會(huì)導(dǎo)致錯(cuò)誤
for (const key in object) {
funcs.push(function() {
console.log(key);
});
}
funcs.forEach(function(func) {
func(); // 依次輸出 "a"、 "b"、 "c"
});

這段代碼與“循環(huán)內(nèi)的 let 聲明”小節(jié)的第二個(gè)例子幾乎完全一樣，唯一的區(qū)別是 key 的值在
循環(huán)內(nèi)不能被更改。 const 能夠在 for-in 與 for-of 循環(huán)內(nèi)工作，是因?yàn)檠h(huán)為每次迭
代創(chuàng)建了一個(gè)新的變量綁定，而不是試圖去修改已綁定的變量的值（就像使用了 for 而不是
for-in 的上個(gè)例子那樣）。

let 與 const 不同于 var 的另一個(gè)方面是在全局作用域上的表現(xiàn)。當(dāng)在全局作用域上使
用 var 時(shí)，它會(huì)創(chuàng)建一個(gè)新的全局變量，并成為全局對(duì)象（在瀏覽器中是 window ）的一
個(gè)屬性。