【ES6基础】let和作用域

2,381 阅读8分钟

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

从今天开始,小编将会介绍ES6及以后的相关内容,为了便于理解和学习,每篇文章尽量简短。本篇文章小编将带着大家一起学习如何使用新的语法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的比较

对比项

let

var

声明变量

可以被释放

可以被提升

重复定义检查

可被用于块状作用域

重复定义变量问题

用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》

更多精彩内容,请微信关注”前端达人”公众号!