JS 作用域与作用域链

一、JS 作用域与作用域链

1. 理解

• 就是一块“地盘”，一个代码段所在的区域；
• 它是静态的（相对于上下文对象），在编写代码时就确定了

2. 分类

• 全局作用域
• 函数作用域

3. 作用

• 隔离变量，不同作用域下同名变量不会有冲突。

//全局作用域
var a = 10, b = 20;
//fn作用域
function fn(x) {
	var a = 100, c = 300;
	console.log("fn()", a, b, c, x);
	//bar作用域
	function bar(x) {
		var a = 1000, d = 400;
		console.log("bar()", a, b, c, d, x);
	}
	bar(100);// bar() 1000 20 300 400 100
	bar(200);// bar() 1000 20 300 400 200
}
fn(10);// fn() 100 20 300 10

二、作用域与执行上下文

1. 区别1

• 全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时；
• 全局执行上下文是在全局作用域确定之后，js代码马上执行之前创建；
• 函数执行上下文是在调用函数时，函数体代码执行之前创建；

2. 区别2

• 作用域是静态的，只要函数定义好了就一直存在，且不会再变化；
• 执行上下文是动态的，调用函数时创建，函数调用结束时就会自动释放；

3. 联系

• 上下文环境（对象）是从属于所在的作用域
• 全局执行上下文—>全局作用域
• 函数执行上下文—>对应的函数使用域

三、作用域链

1. 理解

• 多个上下级关系的作用域形成的链，它的方向是从下到上的（从内到外）；
• 查找 变量时就是沿着作用域链来查找的；

2. 查找一个变量的查找规则

• 在当前作用域下的执行上下文中查找对应的属性，如果有直接返回，否则进入下一条；
• 在上一级作用域的执行上下文中查找对应的属性，如果有直接返回，否则进入下一条；
• 再次执行相同的操作，直到全局作用域，如果还找不到就抛出找不到的异常；

var x = 10;
function fn() {
	console.log(x);
}
function show(f) {
	var x = 20;
	fn();
}
show(fn);// 10

var fn = function() {
	console.log(fn);
};
fn();// 输出fn对应的函数

var obj = {
	fn2:function() {
		console.log(fn2);//在fn2作用域中找fn2，没有；再到全局作用域中找，也没有；报错。
		console.log(this.fn2);//输出fn2对应的函数
	}
};
obj.fn2();//