[TOC] >[success] # es6之前的作用域 [關于var更詳細的作用域文章](http://www.hmoore.net/cyyspring/html_js_cs/664497) 說明：var 聲明永遠作用于腳本、模塊和函數體這個級別，在預處理階段，不關心賦值的部分， 只管在當前作用域聲明這個變量。 ~~~ 1.在其他語言中都有類似塊級作用域的概念即所聲明的變量只能 在塊級內使用。 2.在es6之前，js的變量都是通過 'var' 聲明，被聲明的變量，就會 變成全局變量(除了在function 中聲明的變量) ~~~ >[danger] ##### 在非function 中使用var定義變量 ~~~ 1.在其他語言中'{}'即為一個作用域，因此下面的案例在其他語言中 在'{}'外是訪問不到在'{}'定義的變量，但在'js'中不是這樣，if中通過 'var' 聲明的變量name在'{}' 作用域外可以訪問到 ~~~ ~~~ if(true){ var name = 'wang' } console.log(name) 打印結果： wang ~~~ >[danger] ##### 在function 中var 定義變量 ~~~ 1.在function 中定義的變量，在function 外打印'age'變量時候 控制臺報出未定義的提示 ~~~ ~~~ function test() { var age = 17 } console.log(age) 打印結果： age is not defined ~~~ >[danger] ##### 變量提升機制 -- 解釋var變量聲明訪問 [預解析機制](http://www.hmoore.net/cyyspring/html_js_cs/665715) ~~~ 1.把變量的聲明提前了----提前到當前所在的作用域的最上面 2.函數(function)的聲明也會被提前---提前到當前所在的作用域的最上面 3.為什么在函數中聲明的變量外部不能訪問，因為在函數退出后函數內部 的變量會被銷毀 4.拋開函數來說，聲明'var'的變量它會創建一個全新的全局變量作為全局對 象，即聲明一個'window'對象 5.第四條的問題就是，好多js自帶的變量都是在'window'變量中，就會導致變量 覆蓋問題： var RegExp = 'wang' console.log(window.RegExp) // wang 覆蓋了原先的正則對象 6.所謂'var' 聲明能被提前使用”的效果，事實上是'var' 變量總是被引擎預先初始化為 'undefined'的一種后果。 ~~~ * 解釋第四條 ~~~ if(true){ var name = 'wang' } console.log(name) // wang console.log(window.name) // wang ~~~ >[success] # 新的變量聲明 const /let ~~~ 1.為了解決'var' 或多多少的問題，es6 引入了let/const 2.let/const 可以很好的限制變量的作用域使用范圍，不會出現和var將window 變量覆蓋的問題，變量是不會掛載到window 全局上 3.let和const 也不會出現像'var' 一樣的變量提升問題 ~~~ >[danger] ##### let ~~~ 1.使用let 后的變量也可以像其他語言一樣作用域只在'{}' 生效，并且不會出現將 window 中的同名變量覆蓋問題 ~~~ ~~~ if(true){ let sex = '妖' } console.log(window.sex) // undefined console.log(sex) // 報錯 ~~~ >[danger] ##### const ~~~ 1.const 和let 作用域基本一致，只是使用起來的場景不同，const聲明的是常量， 被設置后事不允許被修改的 2.如果聲明的變量是對象，是允許修改綁定對象的值，但不允許修改被綁定的對象， 換成其他對象 3.const 聲明的變量不能重新指向新的內存空間 4.const 是常量因此聲明時候必須要賦值,下面的寫法let 和 var 都可以但是const會報錯 const name name = 'w' ~~~ ~~~ if(true){ const sex = '妖' } console.log(window.sex) // undefined console.log(sex) // 報錯 ~~~ ~~~ const name = 'wang' name = 'yi' // 會報錯不允許修改 ~~~ >[danger] ##### let const 和var 為什么會有這種區別 ~~~ 1.js 引擎在掃描代碼發現變量聲明的時候，當發現變量是'var'聲明的，會將該變量 提升到所在作用域的最上面，也就是如果是function 就會在function最上面，如果是 非function 就會在整個代碼的最上面 2.let 和const 會放到'臨時鎖死區' 也就是'TDZ' 這個區域，凡是在這個區域里的變量， 會放到其所在作用域中('{}'),并且必須執行過變量聲明語句，變量才會從臨時鎖死區中移除 才能訪問其變量內容，簡單說：這些變量會被創建在包含他們的詞法環境被實例化 時，但是是不可以訪問它們的，直到詞法綁定被求值 ~~~ ~~~ // 解釋 根據上面第二條的解釋，value 所在的作用域'{}' 當在這個作用域的時候，value // 被let 聲明所以放到了對應的TDZ 區域，但想獲取必須還要執行，因此沒有執行過所以報錯 if(true){ console.log(typeof value) // Cannot access 'value' before initialization 初始化前無法訪問value let value = 'bule' } ~~~ ~~~ // 這時候value 和if 中的value 所在的區域不同 // 所以打印結果是undefined console.log(typeof value) if(true){ // 這時候的value他 的作用域只在if中 let value = 'bule' } ~~~ >[danger] ##### 三者要注意的問題-- 不允許重復聲明 ~~~ 1.let/const不允許在相同作用域內，重復聲明同一個變量。 2. 即使同一個變量名用三個不同修飾也是不允許的，一個變量名 只能有唯一的修飾，下面的寫法是錯誤的 let name = 'wang' var name = 'wang' const name = 'wang' ~~~ >[info] ## 循環中的let / const / var 變量 >[danger] ##### var 循環 ~~~ 1.下面第一個案例打印0到10，第二個是打印10次10，第一個案例是在我們預料中的 ，第二個案例和我們期待的略有差別這是因為使用var，內部創建的函數最后引用了 相同的變量引用導致打印是十次10 2.想解決可以通過let 或者閉包形式解決 ~~~ ~~~ for(var i =0;i<10;i++){ console.log(i) // 0..4..9 0到10 } console.log(i) // 10 ~~~ ~~~ const list = [] for(var i =0;i<10;i++){ list.push(()=>{ console.log(i) }) } list.forEach(item=>{ item() // 打印10次10 }) console.log(i) // 10 ~~~ * 閉包的形式解決 ~~~ 1.所謂的閉包 就是利用函數作用域來解決問題，在沒有let 和const 的時代，有作用域的也僅僅只有函數， 因此相當于將整個函數作用域變相的代替了那個時代的 let 和const ~~~ ~~~ const list = [] for(var i =0;i<10;i++){ list.push(((value)=>{ return ()=>{ console.log(value)} })(i)) } list.forEach(item=>{ item() // 打印0-9 }) console.log(i) // 10 ~~~ >[danger] ##### let 循環 ~~~ const list = [] for(let i =0;i<10;i++){ list.push(()=>{ console.log(i) }) } list.forEach(item=>{ item() // 打印0-9 }) console.log(i) // 報錯此時i作用域只在for循環的{}中 ~~~ >[danger] ##### const 循環 ~~~ 1.下面的案例直接報錯因為i++,將const 賦值i 進行了更改 2.但在for...in 和 ...of 是const 和let 都可以 ~~~ ~~~ const list = [] for(const i =0;i<10;i++){ list.push(()=>{ console.log(i) }) } list.forEach(item=>{ item() }) console.log(i) ~~~ >[danger] ##### 循環案例二 ~~~ 1.下面{1}打印出來的次數不想想象中打印了9次，就是因為作用域聲明的問題，內外的for相當于用的 都是同一個i，內層循環的時候，已經將i的整體變為了3，因此外層只循環了一次，可以用閉包 let const 來解決計數器內外名相同的問題，但是開發原則上是不建議相同的名字 ~~~ ~~~ for(var i=0;i<3;i++){ console.log(i,'外') for (var i = 0; i < 3; i++) { console.log(i) // {1} } console.log(i,'內') } // 打印結果： 0 '外' 0 1 2 3 '內' ~~~ >[danger] ##### 循環案例三 ~~~ 1.下面的案例使用了let 聲明了變量i，只不過分別在for 里面 和 for 外面都聲明了，但最后執行結果是 打印了三遍'foo' 這段代碼可以理解成，兩個i分別在不同的作用域因此是不會相互影響的 // let i = 0 // if (i < 3) { // let i = 'foo' // console.log(i) // } // i++ // if (i < 3) { // let i = 'foo' // console.log(i) // } // i++ // if (i < 3) { // let i = 'foo' // console.log(i) // } // i++ ~~~ ~~~ for (let i = 0; i < 3; i++) { let i = 'foo' console.log(i) } // 打印結果： foo foo foo ~~~ * var 會怎么樣 ~~~ 1.產生這個問題的原因是var 聲明的i共享了，當下一次進入for循環時候其實是 'foo'<3 是false 因此循環結束了 ~~~ ~~~ for (var i = 0; i < 3; i++) { var i = 'foo' console.log(i) } // 打印結果： foo ~~~ >[danger] ##### 總結 ~~~ 1.在實踐時候明確可以使用es6的情況下，應該不用var，主要const ，配合let ~~~