var
1.变量提升
注意:只能提升定义,不能提升赋值
提升是指无论var出现在一个作用域的哪个位置,这个声明都属于当前整个作用域,在其中到处都可以被访问。注意知识定义提升,赋值不能提升
console.log(a);//undefined
var a = 1;
var a;
console.log(a);//undefined
a = 1;
如果未定义,就会报错
console.log(b);//假设b未声明过,Uncaught ReferenceError: b is not defined
2.函数作用域
如果使用关键字var声明一个变量,那么这个变量就属于当前的函数作用域,如果是声明式在发生在任何函数外的顶层声明,那么这个变量就是全局作用域
var a = 1; //此处声明的变量a为全局变量
function foo(){
var a = 2;//此处声明的变量a为函数foo的局部变量
console.log(a);//2
}
foo();
console.log(a);//1
省略掉var
var a = 1; //此处声明的变量a为全局变量
function foo(){
a = 2;//此处的变量a也是全局变量
console.log(a);//2
}
foo();
console.log(a);//2
let
1.变量不能重复声明
let a = 100
let a = 1000
//报错
2.块级作用域
块级作用域包括{},if,else,while,for
块级作用域意思就是只在当前代码块上起作用
如果使用var
{
var g = 100
}
console.log(g)//100
使用let
{
let a = 100
}
console.log(a)//a is not defined
3.不存在变量提升
4.经典例子
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
<script>
let items = document.getElementsByClassName('item')
for (var i = 0; i < items.length; i++) {
items[i].onclick = function () {
// this.style.background = 'red'//这样做是可行的
items[i].style.backgroud = 'red'//这样做不可行,因为i已经等于3了
}
}
</script>
解决办法,把var i =0 改成let就行了
const
const定义基本类型变量时是不可以变的,但是定义引用类型变量时是可以变的,参考基本类型和引用类型区别