JavaScript let的理解

1.简化内部函数代码

当用到内部函数的时候，let会让你的代码更加简洁。

var list = document.getElementById('list');for (let i = 1; i <= 5; i++) {let item = document.createElement('li');item.appendChild(document.createTextNode('Item ' + i));item.onclick = function(ev) {console.log('Item ' + i + ' is clicked.');};list.appendChild(item);
}// to achieve the same effect with 'var'
// you have to create a different context
// using a closure to preserve the value
for (var i = 1; i <= 5; i++) {var item = document.createElement('li');item.appendChild(document.createTextNode('Item ' + i));(function(i){item.onclick = function(ev) {console.log('Item ' + i + ' is clicked.');};})(i);list.appendChild(item);
}

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

在程序或者函数的顶层，let并不会像var一样在全局对象上创造一个属性，比如：

var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined

2.let暂存死区的错误

在相同的函数或块作用域内重新声明同一个变量会引发SyntaxError。

if (x) {let foo;let foo; // TypeError thrown.
}

在 ECMAScript 2015 中，let绑定不受变量提升的约束，这意味着let声明不会被提升到当前执行上下文的顶部。在块中的变量初始化之前，引用它将会导致 ReferenceError（而使用 var 声明变量则恰恰相反，该变量的值是 undefined ）。该变量处于从块开始到初始化处理的“暂存死区”。

function do_something() {console.log(bar); // undefinedconsole.log(foo); // ReferenceError: foo is not definedvar bar = 1;let foo = 2;
}

在 switch 声明中你可能会遇到这样的错误，因为它只有一个块.

switch (x) {case 0:let foo;break;case 1:let foo; // TypeError for redeclaration.break;
}

但是，重要的是要指出嵌套在case子句内的块将创建一个新的块作用域的词法环境，这不会产生上面显示的重新声明错误。


let x = 1;switch(x) {case 0: {let foo;break;}  case 1: {let foo;break;}
}

JavaScript let的理解相关推荐

【javascript】深入理解对象
为什么80%的码农都做不了架构师?>>> 今天学习的主题是 JavaScript对象. 要创建一个JavaScript对象大家应该都觉得很简单,直接写上一行 var obj = ...
我对javascript对象的理解
前言 JavaScript这门语言除了基本类型都是对象,可以说JavaScript核心就是对象,因此理解JavaScript对象及其种种特性至关重要,这是内功.本文介绍了我对es5对象,原型, 原型链 ...
JavaScript面向对象——深入理解寄生组合继承
JavaScript面向对象--深入理解寄生组合继承之前谈到过组合继承,会有初始化两次实例方法/属性的缺点,接下来我们谈谈为了避免这种缺点的寄生组合继承寄生组合继承: 思路:组合继承中,构造函数继 ...
JavaScript面向对象——深入理解原型继承
JavaScript继承--深入理解原型继承原型继承 // 父类function School (name, address) {this.name = namethis.address = add ...
【Javascript】深入理解this作用域问题以及new/let/var/const对this作用域的影响
理解this作用域 <javascript高级程序设计>中有说到: this对象是在运行时基于函数的执行环境绑定的:在全局函数中,this等于window,而当函数被作为某个对象调用时,t ...
Javascript闭包简单理解
Javascript闭包简单理解原文:Javascript闭包简单理解提到闭包,想必大家都早有耳闻,下面说下我的简单理解. 说实话平时工作中实际手动写闭包的场景并不多,但是项目中用到的第三方框架和 ...
JavaScript之全面理解面向对象的JS
今天看到一篇文章写得很好,对于像博主这种js一般级别的菜鸟很有帮助,博主秉着"好文要转"的原则收藏了这篇文章,简单排了下版,分享给大家,本文转自原文:http://www.ibm. ...
javascript之异步操作理解---回调函数，async，await以及promise对象
javascript之异步操作理解---回调函数,async,await以及promise对象概述概述写在前面:虽然平时做项目,但是发现自己写的代码还是很烂.最近接触了一个对性能要求比较高的项目 ...
细心看完这篇文章，刷新对Javascript Prototype的理解
var person={name:'ninja'}; person.prototype.sayName=function(){return this.name; } 分析上面这段代码,看看有没有问题? ...
[转] JavaScript：彻底理解同步、异步和事件循环(Event Loop)
一. 单线程我们常说"JavaScript是单线程的". 所谓单线程,是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个.不妨叫它主线程. 但是实际上还存在其他 ...

JavaScript let的理解

1.简化内部函数代码

2.let暂存死区的错误

JavaScript let的理解相关推荐

最新文章

热门文章