全局做用域、函數做用域、塊級做用域的理解

1.前言

做用域是任何一門編程語言中的重中之重，由於它控制着變量與參數的可見性與生命週期。很慚愧，我今天才深刻理解JS的做用域..我不配作一個程序員.. 開玩笑，何時理解都不晚，重要的是理解了之後能不能深深地紮在記憶裏，不能，那就寫下來

2.塊級做用域

在一個代碼塊（括在一對花括號中的一組語句）中定義的全部變量在代碼塊的外部是不可見的。

ES6中新增的概念，在ES5中是沒有的，ES5中沒有？ 沒有的時候咱們代碼也寫的好好的，如今新增的概念，我不用不行嗎？ 來，拋一個典型的問題出來，你就明白塊級做用域出現的重要性了。

var i = 100;                //全局變量
for(var i = 0;i < 5; i++){}
console.log("i =",i);       //i = 5

咱們用i變量只想在for循環中使用，並無想要修改全局變量的意思。你可能會說誰會用i作全局變量啊，那個全局變量i只是爲了突出這個例子，修改全局變量事小，泄露成全局變量纔是咱們擔憂的。
怎麼辦？在ES5時代，尚未塊級做用域這個概念，可是當時也有一種解決方法，那就是..
..
..
..
..
對，閉包，用後即焚：

var i = 100;                //全局變量
(function(){
    for(var i = 0;i < 5; i++){}
})()
console.log("i =",i);       //i = 100

ES6中爲何會出現塊級做用域的概念，那還要問let和const兩兄弟。

3.let 很皮

使用let和const之後會發現，他們聲明的變量做用域範圍不會超過{}這個圈

for(let i = 0; i < 5; i++){};
console.log("i =",i);      //i is not defined

let 對比以前 var 聲明的變量總結有如下幾點不一樣：

• 1.let 只在聲明的代碼塊內有效。上面已經驗證

{
    let a = 1;
}
console.log(a);           //Uncaught ReferenceError: a is not defined

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

• 2.let 不容許同一個做用域重複聲明變量（先var 後 let 或 先 let 後 var 都不可行）；var 後聲明的會替換以前的。

let a = 1;
let a = 2;                //Uncaught SyntaxError: Identifier 'a' has already been declared

var a = 1;
var a = 2;                // a = 2

• 3.let 存在暫時性死區(瞎jb拽詞，我的理解以前var聲明的變量至少是undefined，如今用let的話直接拋錯)。

// 大括號中a使let聲明，因此只能在聲明後使用（不存在聲明提早，a = undefined的狀況）
var a = 10;
{
    console.log(a);   //Uncaught ReferenceError: a is not defined
    let a = 2;
    console.log(a);   //2
}

// 大括號中a使var聲明
var a = 10;
{
    console.log(a);   //undefined
    var a = 2;
    console.log(a);   //2
}

• 4.全局變量的屬性

window.a = 1;
var a = 2 ;
console.log(a);         // 2
console.log(window.a);  // 2

window.b = 1;
let b = 2 ;
console.log(b);         // 2
console.log(window.b);  // 1

4.活用const

const 聲明的對象，是能夠修改內部屬性的，數組同理；

5.總結

主要總結一下塊級做用域、以及塊級做用域出現的意義，方便更好的記住。
let 和 const 產生必定有它的意義，ES6其餘的新特性也同樣。
其餘特性會在接下來總結。

同步公衆號：

參考連接：a1、a2