首先,先来看看三者的区别
var 变量,函数作用域,能重复声明覆盖
let 变量,块作用域,不能重复声明覆盖
const 常量,不能重复声明覆盖
接下来我们具体来分析下其中的区别
1.var
先看代码
var a = 1;
var a = 2;//不会报错
var b;
var c1 = 3;
var c = c1;
var m = { a: 10, b: 20 };
var n = m;
n.a = 15;
function change() {
var a = 4;
var d = 5;
b=1;
c=6;
console.log('a:' + a);//可以输出a=4
console.log('b:' + b);//可以输出b=1
console.log('c1:' + c1);//可以输出c1=3
console.log('c:' + c);//可以输出c=6
console.log('d:' + d);//可以输出d=5
}
change();
var arr3 = new Array();
for(var i = 0;i < 3 ; i++)
{
arr3.push(i);
}
console.log('a:' + a);//可以输出a=2
console.log('b:' + b);//可以输出b=1
console.log('c1:' + c1);//可以输出c1=3
console.log('c:' + c);//可以输出c=6
// console.log('d:' + d);//程序报错
console.log('m.a:' + m.a);//可以输出a=2
console.log('arr3[i]:' + arr3[i-1]);//输出arr3[i]:2
o = 100;
console.log(o);//输出100
console.log(p);//undefined
var p = 100;
console.log(q);//q is not defined
q = 100;
情况1:定义变量a=1,我们可以再定义一个变量var a=2,系统不报错,这里JS会忽略掉第二个a的var声明,将原地址a赋值为2;当运行到change函数中时,我们知道var是函数作用域,这是新定义一个var a=4时,系统会开辟一个新空间存放a=4,此a的作用域就在change函数中,出了change函数,我们可以看到a的指还是全局变量的a,其值为2;
情况2:定义变量b,在change函数中,赋值b=1,结合情况1可以看出,js在change函数中没找到b的声明,于是去外层中找,并在外层找到b的声明,此时可以给b赋值,这里的内存空间还是外层的那个b,故在change外b的值依旧是1;
情况3:定义变量var c1=3;var c=c1;这里c和c1是复制关系,两者指向不同的空间,故当改变c的值时,不会改变c1的值
情况4:在change中定义变量d=5,此时d的作用域就在change函数里,当我们外部想输出d的值时,程序报错,找不到哪里有d的声明
情况5:定义对象m,并定义n=m;JS不允许直接访问堆内存中的位置,因此我们不能直接操作对象的堆内存空间。在操作对象时,实际上是在操作对象的引用而不是实际的对象。因此,引用类型的值都是按引用访问的。这里的引用,我们可以粗浅地理解为保存在变量对象中的一个地址,该地址与堆内存的实际值相关联。这里,我们建立 var m = { a: 10, b: 20 }后,js将a: 10, b: 20存放到一个堆内存中,并将其地址赋给m,定义var n=m后,将a: 10, b: 20的地址也赋值给n,m和n是复制关系,具有不同的空间,但空间里存放的都是a: 10, b: 20的地址,故当我们改变a的值为15时,m和n同步修改了
情况6:当i在for循环里定义,因为var是函数作用域,这里的i其实也是全局作用域的,在for循环外部,也是能访问到的
情况7:变量提升的情况。
1.在js中,如果遇到一个变量赋值的情况,js首先会去作用域中找,如果没找到,会自动在作用域中声明一个变量,此例子中,js其实将o=100处理成var o;o=100;因此可以输出100;
2.console.log(p);var p = 100;此时遇到的只是输出变量的情况,这时候js会去系统找p的声明,虽然是在console声明了var p = 100;但这时候js会将声明提前,js执行的操作是var p;console.log(p);这是只是将声明提前,并没有将赋值提前,故输出undefined;
3.console.log(p);p = 100;此时遇到的也是输出变量的情况,但js找不到变量声明的地方,故console.log(p)报错
2.let
let a = 1;
let a = 2;//报错
let c = 3;
function change(){
a = 11;
let b = 2;
let c = 6;
console.log('a:' + a);//输出a=11
console.log('b:' + b);//输出b=2
console.log('c:' + c);//输出c=6
}
var arr4 = new Array();
for(let k = 0;k < 3 ; k++)
{
arr4.push(k);
}
console.log('arr4[k]:' + arr4[k-1]);//输出k is not defined
change();
console.log('a:' + a);//输出a=11
// console.log('b:' + b);//报错
console.log('c:' + c);//输出c=3
console.log(q);//q is not defined
let q = 100;
let的使用情况跟var基本类似,但有三点不同
情况1.let变量,是不允许重复定义的
情况2.let是块作用域,var是函数作用域,当我们在for循环里面使用let变量时,在for循环外部,是无法访问变量值的;
情况3.使用let声明变量时,不像var那样,有变量提升,因此console.log(q);let q = 100;时,会直接报错q is not defined
3.const
const定义的变量不可以修改,而且必须初始化
const a = 2;//正确
const b;//错误,必须初始化
console.log('a:' + a);//输出a:2
a = 5;
console.log('a:' + a);//无法输出
const c = {a:1};
c = {b:1};//报错
c.a = 2;//没问题
console.log('c.a:' + c.a);//输出c.a:2
情况1:定义基本类型常量const a=2;输出正常
情况2:定义const b;但没有初始话,报错
情况3:定义引用类型常量const c={a:1};js中的基本类型是存在栈内存的,而引用类型的引用存在栈内存,值存在堆内存;const不允许你修改在栈内存中存的值或指针,但是允许你修改堆内存中的值;在此段代码中,a:1存放于堆内存中,const c = {a:1}这段代码的作用就是将a:1的堆内存地址赋给c的栈内存,b:1存放于另外一个堆内存中,当c = {b:1}时,尝试去修改了c的栈内存内容,这是不允许的,但修改a:1这个堆内存的内容,是可以操作的