javascript中var和let有什麼差別

區別：1、var有變數提升，而let沒有；2、let不允許在相同的作用域下重複聲明，而var允許；3、let沒有暫時性死區問題；4、let建立的全域變數沒有給window設定對應的屬性；5、let會產生區塊級作用域，var不會。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

想要了解var（ES5）和let（ES6）區別，首先就要了解ES5下JS的變數提升

一、變數提升（聲音）

當瀏覽器開闢出供程式碼執行的堆疊記憶體後，程式碼並沒有自上而下立即執行，而是繼續做了一些事情：把目前作用域中所有帶var/function關鍵字的進行提前的宣告和定義=> 變數提升機制

• #的只是提前宣告（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設定對應的屬性

/* * javascript中var和let有什麼差別的：相当于给全局对象window设置了一个属性a * window.a = 13 */ a = 13 console.log(a) // => window.a 13 /* * 栈内存变量存储空间 * b * javascript中var和let有什麼差別：是在全局作用域下声明了一个变量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會產生區塊級作用域

       
   红 绿 蓝   

javascript進階教學】#

以上是javascript中var和let有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！