概述

声明变量不赋值，则为undefined，"var a; === undefined"
变量的创建分为定义和赋值，var a = 10会被解析为var a; a = 10，let和const也是一样的

var

重复声明

var a = 10
var a = 20
console.log(a) // 20

var允许变量重复声明

变量提升

console.log(a)

使用未定义的变量会报错

console.log(x)
var x = 10

程序执行到console.log(x)为什么不会报错呢，因为使用使用var存在变量提
var x = 10其实是分为两个步骤执行的，先执行var a，然后a = 10，而var a在程序正式执行之前会被优先执行(预执行)，因此代码执行顺序如下

var a
console.log(a)
a = 10

全局声明

var a = 10
console.log(window.a) // == 10

在全局中使用var声明的变量会被放到window对象上，因此如果声明的变量一多，就会造成window对象沉重，且被挂在到window对象上的属性不会被回收

作用域

if (false) {
  var x = 10
}
for (var i = 0; i < 10; i++) {}
console.log(x, i) // == undefined, 10

学过java等其他语言的，在执行打印语句时都会报错，js没报错是因为在执行之前，会进行一遍预执行，在这个例子中var的声明会提取至全局作用域，而打印语句也是在全局中，执行过程如下

var x
var i
if (false) {
    x = 10
}

for (i = 0; i < 10; i++) {}
console.log(x, i)

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<script>
    var els = document.querySelectorAll('li')
    for (var i = 0; i < els.length; i++) {
        els[i].onclick = function () {
            console.log(i)
        }
    }
</script>

每个li点击时都会打印6，执行过程如下

var els = document.querySelectorAll('li')
var i
for (i = 0; i < els.length; i++) {
  els[i].onclick = function () {
    console.log(i)
  }
}

使用let则不会出现这个问题

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<script>
    var els = document.querySelectorAll('li')
    for (let i = 0; i < els.length; i++) {
        els[i].onclick = function () {
            console.log(i)
        }
    }
</script>

let

let 不存在变量提升（预执行仍然会去找var, function，但是不会查找let）
let 在全局中声明不会挂在到window对象
let 不允许重复声明

let x = 20
let x = 10

图片.png

console.log(x)
let x = 10

let a = 10
console.log(window.a) // undefined

let声明的变量不会挂在到window对象上

const

const data = 10
data = 20

报错，const声明的变量是不允许二次赋值的

const data = {
    a: 10
}
data.a = 20
console.log(data.a) // 20

其他

问卷网，查查掌握程度~