深入理解JavaScript的作用域

今天面试滴滴被问到JavaScript的作用域，不知道是脑子短路还是怎么，就只回答了：被一对{ }括起来的就是一个作用域。执行环境、全局执行环境、作用域链都没有提及到，回答的很是“肤浅”。
或许是自己本身对这块知识就理解的不够深刻吧，那就从头来过吧！

执行环境

执行环境（Execution context）是JavaScript中最为重要的一个概念。

1. 执行环境定义了变量或函数有权访问的其它数据，决定了他们各自的行为；
2. 每个执行环境都有一个与之关联的变量对象；
3. 环境中定义的所有变量和函数都保存在这个对象中。

全局执行环境

在Web浏览器中，全局执行环境被认为是window对象，因此所有全局变量和函数都是作为window对象的属性和方法创建的。
某个执行环境的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之被销毁。
全局执行环境直到应用程序退出——例如关闭网页或浏览器时才会被销毁。

作用域链

当代码在一个环境中执行时，会创建变量对象的一个作用域链。

1. 作用域链的前端，始终都是当前执行的代码所在环境的变量对象。
2. 作用域链的后端，始终都是全局执行环境的变量对象。

作用域链的用途？
保证对执行环境有权访问的所有变量和函数的有序访问。

来个实际的例子比较好理解：

var color = "blue";
function changeColor(){
	var anotherColor = "red";
	function swapColor (){
		var tempColor = anotherColor;
		anotherColor = color;
		color = tempColor;
	}
	swapColor();
}
changeColor();

其作用域链如下：

内部环境可以通过作用域链访问所有的外部环境，外部环境不能访问内部环境中的任何变量和函数。

比如，swapColor()其作用域链包含：swapColor()的变量对象、changeColor()的变量对象和window全局变量对象。swapColor()在访问变量时会先从自己的作用域中搜索，找不到则再搜索上一级作用域链。
而window作用域却不能访问changeColor()和swapColor()的变量对象。

块级作用域

在JavaScript中，不能说一个{ … }就是一个作用域，JavaScript中没有块级作用域的概念，块级作用域概念是在ES6中提出来的，使用let、const声明变量。
来看一下下面这段代码：

if(true){
	var color = "red";
}
console.log(color); // "red"

在JavaScript中，变量声明会被添加到当前的执行环境中，实际上，使用var声明的变量，其实就是当前执行环境的全局变量了，尽管它只是在if语句，或者for语句里面声明的。