1. 初步了解 上下文（context）

   上下文(context) 全称 执行上下文 (execution context) 。

  变量和函数的上下文 决定了它们可以访问哪些数据，以及它们的行为。所以 上下文 也可以说是 变量和函数所处的环境。

  每个上下文都有一个关联的变量对象，而这个上下文中定义的所有变量和函数都存在于这个对象上。虽然无法通过代码访问变量对象，但后台处理数据总是用到它。

2. 全局上下文(global context)

  全局上下文是最外层的上下文。浏览器中，全局上下文就是 window 对象，所有通过 var 定义的全局变量和函数都会成为window对象的属性和方法。
  使用 let 和const 的顶级声明不会定义在全局上下文中，但在作用链解析上效果是一样的。上下文在其所有代码都执行完毕后会被销毁，包含定义在它上面的所有变量和函数，全局上下文在应用程序退出前才会被销毁，比如关闭网页或退出浏览器。

3. 上下文栈 (context stack)

  每个函数调用都有自己的上下文，当代码执行到某个函数时，函数的上下文被推到(push)一个 上下文的栈结构 中，忘了栈结构的，可以查看 栈的基本操作。在函数执行完之后，上下文栈会弹出(pop)该函数的上下文，将控制权返还给之前的执行上下文。ECMAScript程序的执行流就是通过这个上下文栈进行控制的。

4. 作用域链( scope chain)

   学习作用域，先了解一下做应用于链。这个链，其实就是上面说的上下文栈结构。
  上下文中的代码在执行的时候，会创建变量对象的一个作用域链。这个作用域链决定了各级上下文中的代码在访问变量和函数时的顺序。代码正在执行的上下文的变量对象始终处于作用域链的最前端。如果上下文是函数，则其活动对象(activation object) 用作 变量对象。活动对象最初只有一个变量：参数（arguments)。题外话：上面提到的全局上下文是没有这个变量的。作用域链中的下一个变量对象来自包含上下文，再下一个对象来自下一个包含上下文。依次类推直至全局上下文。全局上下文的变量对象始终是作用域链的最后一个变量对象。

  代码执行的标识符解析是通过沿作用域链逐级搜索标识符名称完成的。搜索过程始终从作用域链的最前端开始，然后逐级往后，直到找到标识符。（未找到标识符，通常会报错）

5. 作用域(scope)

作用域，就是 变量可用性的范围。通俗的讲，就是哪些函数可以访问到这个变量。
先看下面的例子：

var color = "blue";
function changeColor() {
	if (color === "blue") {
		color = "red";
	} 
	else{
		color = "blue";
	}
}
changeColor();

上述函数 changeColor() 的作用域包含两个对象：一个是它自己的变量对象(即 arguments 对象的那个),另一个是全局上下文的变量对象。这个函数内部之所以能够访问变量color，就是因为可以在作用域链中找到它。
局部作用域中定义的变量可用于在局部上下文中替换全局变量。看看下面这个例子:

var color = "blue";
function changeColor() {
	let anotherColor = "red";
	
	function swapColors(){
		let tempColor = anotherColor;
		anotherColor = color;
		color = tempColor;
		//此处为swapColors内部，可以访问color、anotherColor 和tempColor
	}
	//此处为changeColor内部，可以访问 color 和anotherColor ,但访问不到tempColor
}
// 这里只能访问color 
changeColor();

   以上代码涉及到3个上下文：全局上下文、changeColor（）的局部上下文和 swapColors()的局部上下文。他们的关系是全局上下文包含 changeColor（）上下文，changeColor（）包含 swapColors()。
他们的关系如下图:

对于swapColos来说，发现变量color, 先在自己的局部上下文 swapColors() 中搜索，发现自己并没有color的定义。往父级上下文changeColor () 中搜索，还是没有搜索到，则到全局作用域 window中搜索，本次搜索到了。

6. 作用域链增强

上下文包含全局上下文和函数上下文两种方式，按照栈的结构形成作用域链，按照顺序向上级搜索，但是有两种情况增强作用域链：
try/catch 语句的catch块
with 语句
这两种情况 直接在作用域链前端临时添加一个上下文，在代码执行后被删除。
对于with语句来说，会想作用域链前端添加一个指定的对象；
对于catch语句而言，则会创建一个新的变量对象，这个变量对象会包含要抛出的错误对象的声明。

function buildUrl(){
	let qs = "?debug=true";
	with (location) {
		let url = href + qs;
	}
	return url;  // 这里的url为 undefined
}

上面代码中，with 语句将 location 对象作为上下文，因此 location会被添加到作用域链前端。buildUrl函数中定义了一个变量 qs。 当 with 语句中的代码应用变量 href 时， 实际上引用的是 location.href,也就是自己变量对象的属性。在引用 qs 时，引用的则是定义在 buildUrl() 中的那个变量，它定义在函数上下文的变量对象上。而在with 语句中使用 var声明的变量 url 会成为函数上下文的一部分，可以作为函数的值返回；但这里使用 let 声明的变量url ,因为被限制在块级作用域，所以在with 块之外没有定义。