var 与 let 的区别

var

var 声明的变量是函数作用域变量。

var a = 1;
var a = 2;
等价于
var a;
var a;
a = 1;
a = 2;

var 声明的变量提到作用域的前方,简称变量提升。

看一个例子

var a = 1;
function foo(){
  alert(a);
  var a = 2;
}
foo.call()

alert(a)打出来的是什么?

我们先做一下转换,先找声明,把声明提升到作用域的前方,再看代码。

var a;
function foo(){
  var a;
  alert(a);
  a = 2;
}
a = 1;
foo.call()

转换后的代码,我们就一目了然了,alert(a)打出来undefined

function f1(){
  if(true){
  }else{
    var a = 1
  }
  alert(a)
}
f1();

跟前面一样,先找声明,把声明提升到作用域的前方,再看代码。

function f1(){
  var a;
  if(true){
  }else{
    a = 1
  }
  alert(a)
}
f1();

此时的alert(a)也是undefined。

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

打印出i的值是什么呢?
先把声明提升上去,再看代码,1s之后for循环早已执行完毕,此时i的值为6,再执行函数,结果console.log(i)就是6个6。

let

let 声明的变量是块级作用域变量。
let 无法重复声明
let 和 for 循环一起使用有奇怪现象
let 声明的变量提升到块级作用域的第一行
实际声明的一行与块级作用域第一行之间的区域,就是该let 变量的TDZ(临时死亡区域)

let a = 1;
let a = 2; 
//Uncaught SyntaxError: Identifier 'a' has already been declared

重复声明会报错

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

打印出i的值是什么?打印出0 1 2 3 4 5,结果跟我们想的一样,但过程却不一样。

变量i是let声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量

let a = 1;
{
  console.log(a);
  let a = 2;
}

console.log(a)会打出什么呢?

先做转换,再代码。

let a;
a = 1;
{
  let a;
  console.log(a);
  a = 2;
}

转换完,感觉console.log(a)是undefined.再看看let的第五大特性,console.log(a)这行代码就是TDZ(临时死亡区域),所以执行的结果会报错。
先let声明变量,再使用。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • let 命令 块级作用域 const 命令 顶层对象的属性 global 对象 let 命令 基本用法 ES6 新...
    嘉奇呦_nice阅读 1,647评论 0 2
  • JavaScript中声明变量通常使用var,ES6中引入了let声明变量,这两者有什么区别呢? 1. 作用域 通...
    plainnany阅读 779评论 4 3
  • let 命令 块级作用域 const 命令 顶层对象的属性 global 对象 let 命令 基本用法 ES6 新...
    卞卞村长L阅读 615评论 0 0
  • let 和 const 命令 let 命令 块级作用域 const 命令 顶层对象的属性 gl...
    安小明阅读 997评论 0 0
  • 又是夏天,让人觉得厌烦的蝉鸣,和各种虫子混在一起难听及了,可就在这样让人想要马上逃离的季节,我遇到了你。 ...
    木蔓阅读 300评论 0 1