JavaScript中var与let的区别

目录
  • 1.作用域表现形式不同
  • 2.是否变量提升的区别
  • 3.暂时性死区上的区别
  • 4.在同一个上下文中var可以重复声明，let不行

前言：

var是JavaScript刚出现时就存在的变量声明关键字，而let作为ES6才出现的变量声明关键字，无疑两者之间存在着很大的区别。那么具体有哪些区别呢？

1.作用域表现形式不同

var是函数作用域，let是块级作用域

{
  var monkey='熏悟空';
  let pig='猪扒盖';
}
console.log(monkey); //输出undefined
console.log(pig); //报错：pig is not deined

由上面代码可见，let声明的变量只在其所在的代码块有效，在代码块外部无效无法访问，而var声明的变量在该代码块所在的函数作用域内都有效。

2.是否变量提升的区别

var声明的变量会进行变量提升，let声明的变量不会进行变量提升。

console.log(monkey); //undefined
var monkey='熏悟空';

console.log(pig); //报错：pig is not defined
let pig='猪扒盖';

同样的逻辑，为什么var声明的变量在它声明之前调用会显示未定义，而let声明的变量在声明之前调用会抛出异常呢，这就是两者在变量提升上的区别，var声明的变量存在变量提升，let声明的变量不存在变量提升。

那么什么叫变量提升呢，我这里不做概念性的描述，我只说我个人的理解，就是以上代码实际上相当于如下：

var monkey;

console.log(monkey); //undefined
monkey='熏悟空';

console.log(pig); //报错：pig is not defined
let pig='猪扒盖';

看见区别了吗，var声明的变量会将声明的变量提取到作用域的最上面进行定义但不赋值，赋值操作还是在你的代码处，所以你在调用var声明的变量时就是一个已经声明但是并未定义值的变量，所以调用结果就是undefined，这就是所谓的变量提升。而let定义的变量不存在这种变量提升。

3.暂时性死区上的区别

暂时性死区：如果在某一作用域内let了一个变量，如果外部作用域中有相同名称的变量，那么就算在作用域内进行了更改，也不会影响到外部作用域

具体表现如下：

for(var i=0;i<5;i++){
    setTimeout(function(){
        console.log(i)
    },1000)
}
for(let i=0;i<5;i++){
  setTimeout(function(){
     console.log(i)
  },1000)
}

请问这两处代码的运行结果分别是什么？

第一处代码运行完毕的结果是1s后顺序打印5个5；第二处代码运行完毕的结果是1s后顺序打印0,1,2,3,4。

请问为什么会存在这种区别？

因为第一处代码的变量i由var关键字声明，不存在关键性死区，即你在1s后setTimeout中访问到的变量i是全局上下文中for循环运行完毕之后的i,所以打印的结果全是5；

而第二处代码的变量i由let关键字声明，产生了关键性死区，存在setTimeout中的i变量是你当时存储时的i的值，这个存储区间的i不会因为外面有相同的i变量且赋了不同的值而改变，他依旧是之前存储进去的值，这就是暂时性死区的表现，也是为什么第二处代码运行完毕是顺序打印0,1,2,3,4的原因。

4.在同一个上下文中var可以重复声明，let不行

let monkey='熏悟空';
let monkey='逼马吻'; //报错：Identifier 'a' has already been declared
var pig='猪扒盖';
var pig='猪肛裂';  //正常访问，变量pig的值被替换

到此这篇关于JavaScript中var与let的区别的文章就介绍到这了,更多相关JavaScript中var与let内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • javascript中let和var以及const关键字的区别

    1.声明后未赋值,表现相同 //一个例子 'use strict'; (function() { var varTest; let letTest; console.log(varTest); //输出undefined console.log(letTest); //输出undefined }()); 2.使用未声明的变量,表现不同 //一个例子 (function() { console.log(varTest); //输出undefined(注意要注释掉下面一行才能运行) console.

  • 详解js中let与var声明变量的区别

    ES6 新增了let命令,用来声明局部变量,所声明的变量,只在let命令所在的代码块内有效,而且有暂时性死区的约束. 1.ES6可以用let定义块级作用域变量 代码如下: function f1(){ { var a = 10; let b = 20; } console.log(a); // 10 console.log(b); // Uncaught ReferenceError: b is not defined } f1(); 说明:在ES6之前只有全局作用域和函数作用域,在ES6中新增

  • JavaScript中var、let、const区别浅析

    下面通过代码给大家介绍JavaScript中var.let.const区别,具体代码如下所述: //1.var定义的变量可以修改,如果不初始化会输出undefined,不会报错. var a; console.log(a); //undefined //2.let是块级作用域,函数内部使用let定义后,对函数外部无影响. let c = 3; console.log(c) function change(){ let c = 6; console.log(c) } change(); (1)只要

  • JavaScript es6中var、let以及const三者区别案例详解

    首先,一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?         ECMAScript是一个国际通过的标准化脚本语言.JavaScript由ECMAScript和DOM.BOM三者组成.可以简单理解为:ECMAScript是JavaScript的语言规范,JavaScript是ECMAScript的实现和扩展.         2011 年,ECMAScript 5.1 版发布.之前我们大部分人用的也就是ES5         2015 年 6 月,ECM

  • 详解javascript中var与ES6规范中let、const区别与用法

    随着ES6规范的到来,Js中定义变量的方法已经由单一的 var 方式发展到了 var.let.const 三种之多.var 众所周知,可那俩新来的货到底有啥新特性呢?到底该啥时候用呢?下面就是小编总结出的关于javascript中var与ES6规范中let.const区别详解 我们先来絮叨絮叨 var 方式定义变量有啥 bug ? Js没有块级作用域 请看这样一条规则:在JS函数中的var声明,其作用域是函数体的全部. for(var i=0;i<10;i++){ var a = 'a'; }

  • JavaScript中var let const的用法有哪些区别

    目录 1.重复声明 1.1 var 1.2 let 1.3 const 2.变量提升 2.1 var 2.2 let 2.3 const 3.暂时性死区 3.1 var 3.2 let 3.3 conset 4. window对象的属性和方法 5.块级作用域 1.重复声明 var支持重复声明,let.const不支持重复声明. 1.1 var var a = 1; var a = 2; console.log(a); 输出结果: 2 1.2 let let b = 3; let b = 4; c

  • JavaScript中var与let的区别

    目录 1.作用域表现形式不同 2.是否变量提升的区别 3.暂时性死区上的区别 4.在同一个上下文中var可以重复声明,let不行 前言: var是JavaScript刚出现时就存在的变量声明关键字,而let作为ES6才出现的变量声明关键字,无疑两者之间存在着很大的区别.那么具体有哪些区别呢? 1.作用域表现形式不同 var是函数作用域,let是块级作用域 { var monkey='熏悟空'; let pig='猪扒盖'; } console.log(monkey); //输出undefined

  • JavaScript中object和Object的区别(详解)

    JavaScript中object和Object的区别(详解)

    JavaScript中object和Object有什么区别,为什么用typeof检测对象,返回object,而用instanceof 必须要接Object呢 这个问题和我之前遇到的问题非常相似,我认为这里有两个问题需要解决,一个是运算符new的作用机制,一个是function关键字和Funtion内置对象之间的区别.看了一些前辈的博客和标准,这里帮提问者总结一下. 1.new new运算符的作用是创建一个对象实例.这个对象可以是用户自定义的,也可以是带构造函数的一些系统自带的对象.如果 new

  • javascript中局部变量和全局变量的区别详解

    javascript有两种变量:局部变量和全局变量.当然,我们这篇文章是帮助大家真正的区别这两种变量. 首先,局部变量是指只能在本变量声明的函数内部调用.全局变量时整个代码中都可以调用的变量.当然,单单从字面上理解肯定是不清楚的,下面我详细的介绍下: 大家都知道,变量是需要用var关键字声明的.但是javascript中也可以隐式的使用变量,就是不用声明,直接使用.而且,千万注意,javascript把隐式声明的变量总是当成全局变量来使用的. 例如: 复制代码 代码如下: function my

  • JavaScript中undefined和null的区别

     JavaScript中undefined和null的区别 JavaScript两个表示"无"的值:undefined和null.我在平时只是null用的多一点,undefined只是在报错中经常遇到.下面针对这两个数据类型的异同做一下详细的比较. 1.undefined和null在if语句中,都会被自动转为false,相等运算符直接报告两者相等. !null==!undefined==true 2.null表示"没有对象",即该处不应该有值.典型用法是: (1)

  • javascript中call()、apply()的区别

    call().apply()的区别: 相同点: 1.call()和apply()都可以用来间接调用函数,都可以显式调用所需的this.即,任何函数可以作为任何对象的方法来调用. 2.两个方法都可以指定调用实参. 区别: call()和apply()的基本区别:在于将参数传递给函数. call():使用其自有的实参列表作为函数的参数: apply():要求以数组的形式传入参数. function track(o,m){ var original =o[m]; o[m] =function( ){

  • JavaScript中callee和caller的区别与用法实例分析

    JavaScript中callee和caller的区别与用法实例分析

    本文实例讲述了JavaScript中callee和caller的区别与用法.分享给大家供大家参考,具体如下: 1.callee 在函数的内部,有两个特殊的对象:arguments和this.其中arguments是一个类似数组的对象,包含着传入函数的所有参数. 虽然arguments的主要用途是保存函数参数,但这个对象有一个属性--callee,该属性是一个指针,指向拥有这个arguments对象的函数 所以callee的作用就是来指向当前对象 看一个阶层函数的例子就会明白他的用途了: /* *

  • JavaScript中toLocaleString()和toString()的区别实例分析

    本文实例讲述了JavaScript中toLocaleString()和toString()的区别.分享给大家供大家参考,具体如下: <javascript高级程序设计>解释: "toLocaleString()返回对象的字符串表示,该字符串与执行环境的地区对应:toString()返回对象的字符串表示:" 感觉还是不太好理解......来看几个实例: 字符串: var a = 6666; a.toLocaleString(); //"6,666" a.t

随机推荐