let和var的小结

let允许你声明一个作用域被限制在块级中的变量、语句或者表达式。与var关键字不同的是,它声明的变量只能是全局或者整个函数块的。

一 作用域

let声明的变量只能在其声明的块或子块中使用,这个和var很相似,二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数。

// var
function testVar() {
  var a = 0;
  if (true) {
    var a = 1;
    console.log(a);  // 输出1
  }
  console.log(a);  // 输出1
}

// let
function testLet() {
  let a = 0;
  if (true) {
    let a = 1;
    console.log(a);  // 输出1 (不同的变量)
  }
  console.log(a);  // 输出0
}

小结

在testVar函数里面重复输出了1,var声明的变量的作用域是整个封闭函数,所以到if里面被赋值为1,最后都输出为1。

在testLet函数里面{},两个花括号相当于一个作用域,两个a在不同的作用域里面,所以不受影响。(使用let可以完全代替闭包)

二简化内部函数代码

比如给许多函数添加事件

/*
*  使用let
*/

let lists = document.getElementsByTagName('li');
for (let i = 0; i < lists.length; i++) {
  lists[i].onclick = function(ev) {
    console.log(`点击了第${i}个元素`);
  }
}
console.log(i);  // 报错 Uncaught ReferenceError: i is not defined

运行这段代码点击每个元素都能输出正确的i值,而且console报错

var lists = document.getElementsByTagName('li');
for (var i = 0; i < lists.length; i++) {
  lists[i].onclick = function(ev) {
    console.log("点击了第"+i+"个元素"); // 点击了第6个元素
  }
}
console.log(i);  // 输出6


// 解决办法,可以使用自执行函数
var lists = document.getElementsByTagName('li');
for (var i = 0; i < lists.length; i++) {
  (function(i){
    lists[i].onclick = function(ev) {
      console.log("点击了第"+i+"个元素"); // 正常输出
    }
  })(i);
}
console.log(i);  // 输出6

上面的代码可以看出无论点击哪个元素都是输出“点击了第6个元素”,而且最后console也是6。

小结

因为(匿名)内部函数的五个实例引用了变量i的五个不同实例。注意,如果你将let替换为var,则它将无法正常工作,因为所有内部函数都将返回相同的i:6的最终值。此外,我们可以通过将创建新元素的代码移动到每个循环的作用域来保持循环更清晰。

三 暂存死区的错误

不能再相同函数和相同作用域里面重新声明同一个变量

{
  let a;
  let a; //Uncaught SyntaxError: Identifier 'a' has already been declared
}

let 绑定不受变量提升的约束,也就是let声明不会被提升到当前执行上下文的顶部,如果你在初始化之前引用它,也会报上面那个错误。

{
  console.log(a);  // Uncaught ReferenceError: a is not defined
  let a;
  let b;
}

上面介绍了es6作用域的问题,表达式(2 + 55)内的标识符“a”会解析为if块的a,而不是覆盖值为2的a。if块的a已经生明,并未初始化,它仍处在暂存死区

function test(){
 var a = 2;
 if (true) {
    let a = (a + 55); // ReferenceError
  }
}
test();

小结

当在块中使用时,let将变量的作用域限制为该块。注意var的作用域在它被声明的函数内的区别。

总结

  1. let有块级作用域;
  2. 没有变量提升;
  3. 暂存死区的错误;
  4. 不能重复声明;
  5. do表达式。

--- 参考阮老师的 《ECMAScript 6 入门》

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

推荐阅读更多精彩内容