區別: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關鍵字的進行提前的宣告和定義=> 變數提升機制
var a;
,如果只宣告沒有賦值,預設值是undefined
console.log(a); var a = 13;
輸出:undefined
#相當於:
var a; // 只声明没有赋值,默认为undefined console.log(a); a = 13;
1. ##let和
const不存在變數提升機制
var/function有變數提升,而
let/const/class/import 都不存在這個機制
2. var<span style="font-size: 18px;"></span>
允許重複聲明,而let<span style="font-size: 18px;"></span>
不允許重複宣告
關鍵字宣告變數且重複聲明,是不會有影響的(宣告第一次之後,之後再遇到就不會再重複宣告了)
就不行,瀏覽器會校驗目前作用域中是否已經存在這個變數了,如果已經存在了,則再次基於
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建立全域變數時的差異/* * 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會產生區塊級作用域
下面程式碼能否實現點擊某個按鈕,body的背景色改為按鈕對應的顏色,若不能,如何改進(騰訊)<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <style> * { margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; } button { padding: 5px 10px; cursor: pointer; } </style> </head> <body> <!----> <button value="red">红</button> <button value="green">绿</button> <button value="blue">蓝</button> <script> var body = document.querySelector('body'), buttons = document.querySelectorAll('button'), arr = ['red', 'green', 'blue'] for (var i = 0; i < buttons.length; i++) { buttons[i].onclick = function () { body.style.background = arr[i] } } </script> </body> </html>答案當然是不能,因為透過var定義的變量,在for循環中的i是全局的,變量提升、3次循環過後,i=3,因為點擊每個都相當於點擊最後一個。 【推薦學習:
javascript進階教學】#
以上是javascript中var和let有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章!