【ES基础】let和作用域

ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会)以JavaScript为基础制定的一种脚本语言标准。目前，该标准基本上每年发布一次新的ES规范标准，目前最新的标准是ECMAScript 2018（ES9）,由于前端开发的应用场景日益复杂，自从费时六年之久ES6（ECMAScript 2015）的出现，增加了很多新的特性，让JavaScript语言更加标准化和工程化。因此我们有必要重新学习JavaScript，这样才能适应前端日新月异的发展。

从今天开始，小编将会介绍ES的内容，为了便于理解和学习，每篇文章尽量简短。本篇文章小编将带着大家一起学习如何使用新的语法声明变量——let。

本篇文章阅读时间预计10分钟。

你将会学到以下内容：

• let基本介绍
• 作用域介绍
  • 作用域
  • 全局作用域和函数作用域
  • 块级作用域
• var和let的区别
• 重复定义变量的问题
• 提升概念的问题

let介绍

ES6引入了let,用let声明变量，解决了JavaScript没有块级作用域的问题（注:ES3的catch分句会产生块作用域）。

有其它语言背景的比如JAVA,C#开发者来说，这个概念并不难以理解，反而ES6之前，JavaScript没有块级作用域，对于新手而言，使用var声明变量，会让JavaScript不易懂和难以调试，用不好，甚至会有内存泄露的可能性。为什么会这样，主要是没有清楚作用域的概念，接下来我们首先了解下什么是作用域。

作用域

作用域简单的来说，就是一套寻找变量的规则，用于确定在何处以及如何查找变量。说直白点：这些变量在哪里？它们存储在哪里？编译器如何找到它们？ES6代码之前，只有全局作用域或函数作用域。

当一个块或函数嵌套在另一个函数时，就发生了作用域嵌套。如图所示，就有三个嵌套作用域：

1. 全局作用域，其中有一个标识符:foo（整个绿色区域）
2. foo创建的函数作用域,其中有三个标识符：a,bar和b（整个黄色区域）
3. bar创建的函数作用域，其中有一个标识符：c（蓝色区域）

如何在嵌套作用域中寻找变量呢：引擎从当前作用域开始查找变量，如果找不到，就会向上一级继续查找。当抵达最外层全局作用域时，无论找到还是没有找到，查找过程中都会停止。

全局作用域和函数作用域

如何理解全局作用域和函数作用域呢，使用var声明变量时，如果在函数外声明，就是全局变量，任何函数都可以进行使用，这就是全局作用域查找。如果在函数内使用var声明变量,就是函数作用域查找，只能在函数内部进行访问，外部不能进行访问，如下段代码所示：

var a = 12; // 全局作用域都能访问
 function myFunction() {
   console.log(a); // alerts 12
   var b = 13;
   if(true) {
     var c = 14; // 函数内部可以访问
     alert(b); // alerts 13
   }
   alert(c); // alerts 14
 }
 myFunction();
 alert(b); // alerts undefined

为什么b变量访问不到？因为变量b是在函数内进行声明的，因此函数执行完后，由于垃圾数据回收机制的存在，引擎认为函数执行完了，变量应该进行销毁。

如果你在函数内忘记写了b标识前忘记写了var，引擎就会自作聪明，在函数外全局作用域为你自动声明变量b,这样在函数外就能访问b变量了(全局作用域)。

因此使用var进行声明时，如果一不小心，你就会声明一个全局作用域的变量，更糟糕的情况还有可能污染一个同名的变量，因此产生的BUG就很难查找。

以下这个例子会更加明显，也是开发者经常会出现的问题,i变量会绑定到外部作用域（函数或全局作用域），污染整个外部作用域：

for(var i=0;i<10;i++){
	console.log(i); //依次输出1到9
}
console.log(i);//10

块级作用域

幸好es6引入了let，避免了有var声明变量的一些问题，让变量和函数不仅可以属于所处的作用域，也可以属于某个代码块（通常是{...}内部），有一点需要强调，在块级作用域定义的变量，块级作用域外是无法访问的，如下段代码所示：

let a = 12; // 全局作用域，可以访问
function myFunction() {
   console.log(a); // alerts 12
   let b = 13;
   if(true) {
     let c = 14; // this is NOT accessible throughout the function!
     alert(b); // alerts 13
   }
   alert(c); // alerts undefined  {}外，因此无法访问
 }
 myFunction();
 alert(b); // alerts undefined  {}外，因此无法访问

在for循环体，使用var和let的区别更加明显，一个是在全局作用域进行查找变量，一个是在块级作用域查找变量，块级作用域每一次执行都会产生一个作用域。首先在for循环里，使用var声明变量，如下段代码所示：

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

由于JavaScript是单线程，事件循环机制的存在（不太了解事件循环机制的，大家可以查看《JavaScript基础——你真的清楚JavaScript是什么吗？》），主线程执行for循环后，才会执行SetTimeOut里的函数，由于使用var声明的变量，作用域会绑定for循环的上一层作用域，由于for循环执行完后，i的变量自然就等于5，因此setTimeOut在执行内部函数时，查找i变量的值，才会输出5。如图所示变量寻找路径：

将var替换let，将会输出什么结果，如下段代码所示：

for(let i=0;i<5;i++){
	setTimeout(function() {
		console.log(i);
	}, 1000);
}
// 输出 0,1,2,3,4

由于块级作用域的存在，每次循环，就会产生一个循环体块级作用域,因此才会达到预期的输出。如图所示变量寻找路径：

var和let的比较

重复定义变量问题

用var在同一个作用域重复定义变量，后者将会覆盖前者声明的变量的值，如下段代码所示：

var a = 0;
var a = 1;
alert(a); // alerts 1
function myFunction() {
 var b = 2;
 var b = 3;
 alert(b); // alerts 3
}
myFunction();

使用let在同一作用域下重复定义变量，将会产生SyntaxError的错误，如下段代码所示：

let a = 0;
let a = 1; // SyntaxError
function myFunction() {
 let b = 2;
 let b = 3; // SyntaxError
 if(true) {
	let c = 4;
	let c = 5; // SyntaxError
 }
}
myFunction();

如果你在嵌套作用域里进行重新定义变量，虽然变量名相同，但是不是同一变量，如下段代码所示：

var a = 1;
let b = 2;
function myFunction() {
	var a = 3; // different variable
	let b = 4; // different variable
	if(true) {
	  var a = 5; // overwritten
	  let b = 6; // different variable
	  console.log(a); // 5
	  console.log(b); // 6
}
	  console.log(a); // 5
	  console.log(b); // 4
}
myFunction();
console.log(a);
console.log(b);

提升概念的问题

初学JavaScript的同学，直觉上会认为编译器会由上到下一行行的执行，其实并不正确，函数声明和变量声明都会被提升(使用var声明变量，let声明变量将不会被提升)。函数首先会被提升，然后才是变量提升。

首先我们看下段函数提升的代码：

bookName("ES8 Concepts");
function bookName(name) {
	console.log("I'm reading " + name);//I'm reading ES8 Concepts
}

正常输出，由于函数会提升至执行语句前。在来看以下代码，使用变量的方式声明函数：

bookName("ES8 Concepts"); //TypeError: bookName is not a function
var bookName = function(name) {
	console.log("I'm reading " + name);
}

为什么会这样呢，JavaScript引擎只会先提升函数，在提升变量声明，引擎将会对上述代码这样调整，代码如下：

var bookName; // 变量声明提升至最上面
bookName("ES8 Concepts"); // bookName is not function 
								  // because bookName is undefined
bookName = function(name) { // 变量赋值不会被提升
	console.log("I'm reading " + name);
}

如果使用let替换var声明函数呢？将会有什么提示输出呢？如下段代码所示：

bookName("ES8 Concepts"); // ReferenceError: bookName is not defined
let bookName = function(name) {
	console.log("I'm reading " + name);
}

从中可以看出，使用let声明的变量将不会产生变量声明提升。这样的好处就是，让我们更好的按照由上到下的常规方式书写代码，尽量避免提升问题产生的难以查找的问题。

小节

今天的文章就到这里，从中我们可以看出let可以说是var的进化版，为了避免产生奇奇怪怪的问题，让我们能按照大多数高级语言书写代码的思维方式，在绝大部分情况下，我们应该使用let声明变量，让我们的代码更加易于维护和使用。

本文部分内容参：《你不知道的JavaScript》

多精彩内容，请微信关注”前端达人”公众号！