js中的var、let、const的用法、区别及内存空间

2017-07-29  本文已影响0人  南京1865

首先,先来看看三者的区别
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这个堆内存的内容,是可以操作的

上一篇下一篇

猜你喜欢

热点阅读