JS的var和let的區別（詳細講解）
阿新 • • 發佈：2020-01-17
let是ES6新增的，它主要是彌補var的缺陷，你也可以把let看做var的升級版。下面我就來詳細講講var和let的區別
相同點：
var和let都有函式級作用域
不同點：
（1）var是全域性作用域，let不是
var 和 let 宣告的變數在全域性作用域中被定義時，兩者非常相似。但是，被let宣告的變數不會作為全域性物件window的屬性，而被var宣告的變數卻可以
let a = 'aaa; var b = 'bbb'; console.log(window.a); // undefined console.log(window.b); //'bbb'
（2）var沒有塊級作用域，let有快級作用域
let有塊級作用域，而var沒有塊級作用域，這是二者最明顯的區別。例如：
var func;
if(1 == 1){
var name = "LHS"
func = function(){
console.log(name)
}
}
name = "ljq";
func();//輸出的：ljq
一般情況我們都希望把塊級內的與塊級內資料區分，但var沒有塊級作用域，只有函式作用域
如果大家還不理解，我再舉例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>閉包</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: lightgreen;
float: left;
margin: 20px;
font: 30px/100px "microsoft yahei";
text-align: center;
}
</style>
</head>
<body>
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
<div>f</div>
<div>g</div>
<div>h</div>
<div>i</div>
<div>j</div>
</body>
<script type="text/javascript">
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++) {
divs[i].onclick=function(){
alert(i);//都是輸出：10
}
}
</script>
</html>執行結果，點選輸出都是10
以上問題就是var沒有塊級作用域，我們可以把函式作用域代替了塊級作用域，用閉包解決問題：
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++) {
(function(i){
divs[i].onclick=function(){
alert(i);
}
})(i)
}
閉包寫起來有點麻煩，但使用let的話就可以一步到位：
var divs=document.getElementsByTagName("div");
for (let i=0;i<divs.length;i++) {
divs[i].onclick=function(){
alert(i);
}
}結果跟使用閉包一樣，但比閉包簡單
（3）var屬於ES5規範，let屬於ES6規範