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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,561评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,218评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,162评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,470评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,550评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,806评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,951评论 3 407
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,712评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,166评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,510评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,643评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,306评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,930评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,745评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,983评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,351评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,509评论 2 348

推荐阅读更多精彩内容