简述JavaScript作用域与作用域链

关于变量作用域的知识，相信学习JavaScript的朋友们一定早已经接触过，这里简单列举：

• JavaScript中变量是以对象属性的形式存在的：全局变量是全局对象的属性；局部变量是声明上下文对象的属性。（声明上下文对象是一个对用户不可见的内部实现，无法被引用，每当函数调用便创建这个对象以存放局部变量）
• JavaScript虽然是解释型语言，但也存在预处理过程，其中便包含了声明提前。JavaScript解释器运行前，会先将整个程序中的变量声明（包括函数）提前到作用域顶部执行。所以在程序中变量的使用语句可以出现在声明语句之前。
• JavaScript中没有块级作用域（像C语言那样用方括号{}划分作用域），而是使用函数作用域；
• 不在任何函数体内声明的变量为全局变量，拥有全局作用域，可以在程序的任何位置被访问；而在函数内声明的变量（包括函数的参数）为局部变量，拥有局部作用域，只在函数内部有定义；
• 若局部变量与全局变量重名，局部变量优先级高，可以遮盖全局变量；
• 局部作用域可以相互嵌套（因为函数可以嵌套）

    而作用域链的概念，接触过的人就没那么多了。其实作用域链很好理解，上方第一条已经明确了，JavaScript中变量是以对象属性的形式存在的，而作用域链其实就是这些对象组成的一个链表。全局变量是全局对象的属性，局部变量是声明上下文对象的属性。这些对象按从内向外的顺序链接，链尾当然就是全局对象。当函数运行中需要查找某一个变量的时候，就会沿着作用域链依次查询每个对象是否拥有与该变量同名的属性，如果存在则直接使用；若整条链上都不存在这个属性，便抛出ReferenceError。
在函数定义的时候，便创建了作用域链，链上的对象顺序便确定下来，当函数被调用，创建相应的对象添加到作用域链中，作用域链会随着函数的定义调用而更新。在嵌套函数中更是如此，每次调用外部函数时，内部函数又会重新定义，随之带来的就是作用域链的相应变化。关于作用域链的数量，可以用树来比喻，全局对象是根节点，函数的嵌套代表着树节点的层级关系，那么一个程序中作用域链的数量等于对应树中叶子节点的数量。

var a = 1;// 最外层的作用域链上只有全局对象

function func1(){
	var a = 2; // 这一层的作用域链： func1的声明上下文对象 ——> 全局对象
	function func2(){
		var a = 3; // 这一层的作用域链： func2的声明上下文对象 ——> func1的声明上下文对象 ——> 全局对象
		console.log("in func2's scope a= " + a + "  ");
	}
	func2();
	console.log(console.log("in func1's scope a= " + a + "  ");)
}
func1();
console.log(console.log("a= " + a + "  "););

    运行结果可以很清楚的反映出作用域链的查询顺序。

     关于作用域链还不得不提with语句，它可以进行临时性作用域链扩展。它的语法是这样的：with（object）{ statement }。 它将object添加到作用域链的顶部，然后执行语句，执行完毕后将作用域链恢复到原始状态。在对象嵌套层次很深的时候，可以使用with语句简化代码。下面的两段代码是等价的：

var object = {
		object1: {
			name : {
				firstName: "hello",
				lastName: "world",
				nickName: "Jeff"
			}
		}
	};
object.object1.name.firstName = "aaa";
object.object1.name.lastName = "bbb";
object.object1.name.nickName = "ccc";

var object = {
		object1: {
			name : {
				firstName: "hello",
				lastName: "world",
				nickName: "Jeff"
			}
		}
	};

with(object.object1.name){
	firstName = "aaa";
	lastName = "bbb";
	nickName = "ccc";
}

with语句在严格模式中是被禁止使用的，在非严格模式也不推荐使用。使用with语句的代码难以优化，并且运行速度更慢。所以上面这种情况我们可以使用下面的方法等价使用，减少代码：

var object = {
		object1: {
			name : {
				firstName: "hello",
				lastName: "world",
				nickName: "Jeff"
			}
		}
	};
var temp = object.object1.name;
temp.firstName = "aaa";
temp.lastName = "bbb";
temp.nickName = "ccc";