概述
- 声明变量不赋值,则为
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
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
其他
问卷网,查查掌握程度~