想要了解var
(ES5)和let
(ES6)區別,首先就要了解ES5下JS的變量提升
一、變量提升(聲)
當瀏覽器開闢出供代碼執行的棧內存後,代碼並沒有自上而下立即執行,而是繼續做了一些事情:把當前作用域中所有帶var/function關鍵字的進行提前的聲明和定義 => 變量提升機制
- 帶var的只是提前聲明(declare)
var a;
,如果只聲明沒有賦值,默認值是undefined
例如:
console.log(a);
var a = 13;
輸出:undefined
相當於:
var a; // 只聲明沒有賦值,默認爲undefined
console.log(a);
a = 13;
- 帶function的不僅聲明,而且還定義了(defined),準確來說就是讓變量和某個值進行關聯。
二、let和var的區別
1. let
和const
不存在變量提升機制
創建變量的六種方式中:var/function
有變量提升,而let/const/class/import
都不存在這個機制
2. var
允許重複聲明,而let
不允許重複聲明
在相同的作用域(或執行上下文中)
- 如果使用
var/function
關鍵詞聲明變量並且重複聲明,是不會有影響的(聲明第一次之後,之後再遇到就不會再重複聲明瞭) - 但使用
let/const
就不行,瀏覽器會校驗當前作用域中是否已經存在這個變量了,如果已經存在了,則再次基於let
等重新聲明就會報錯
在瀏覽器開闢棧內存供代碼自上而下執行之前,不僅有變量提升的操作,還有很多其他的操作 => “詞法解析”或者“詞法檢測”:就是檢測當前即將要執行的代碼是否會出現“語法錯誤 SyntaxError”,如果出現錯誤,代碼將不會再執行(第一行都不會執行)
console.log(1) // => 這行代碼就已經不會執行了
let a = 12
console.log(a)
let a = 13 // => 此行出錯:SyntaxError: Identifier 'a' has already been declared
console.log(a)
所謂重複就是:不管之前通過什麼方法,只要當前棧內存中存在了這個變量,我們使用let/const
等重複再聲明這個變量就是語法錯誤。eg:
console.log(a)
var a = 12
let a = 13 // => SyntaxError: Identifier 'a' has already been declared
console.log(a)
console.log(a)
let a = 13
var a = 12 // => SyntaxError: Identifier 'a' has already been declared
console.log(a)
3. let能解決typeof檢測時出現的暫時性死區問題(let比var更嚴謹)
console.log(a)
// => ReferenceError: a is not defined
typeof a
未報錯
console.log(typeof a)
// => 'undefined' 這是瀏覽器的bug,本應報錯,因爲沒有a(暫時性死區)
使用let
後:
console.log(typeof a)
// => ReferenceError: Cannot access 'a' before initialization
let a
返回不能在a
被定義之前使用它,解決暫時性死區問題。
4. let創建的全局變量沒有給window設置對應的屬性
首先看帶var與不帶var創建全局變量時的區別
/*
* 不帶var的:相當於給全局對象window設置了一個屬性a
* window.a = 13
*/
a = 13
console.log(a) // => window.a 13
/*
* 棧內存變量存儲空間
* b
* 帶var的:是在全局作用域下聲明瞭一個變量b(全局變量),
* 但是在全局下聲明的變量也相當於給全局對象window增加了一個對應的
* 屬性b(只有全局作用域具備這個特點)
*/
var b = 14
console.log(b)
console.log(window.b)
使用let創建時:
/*
* 棧內存變量存儲空間
* c
* 帶let的:僅僅在全局作用域下聲明瞭一個變量b(全局變量),
* 並未給全局對象window增加對應的屬性c
*/
let c = 15
console.log(c) // => 15
console.log(window.c) // => undefined
5. let會產生塊級作用域
經典例題指路:面試題總結2-大廠
之“下面代碼能否實現點擊某個按鈕,body的背景色改爲按鈕對應的顏色,若不能,如何改進(騰訊)”