【JS】 函数作用域（面试常考，还不来看）

一、作用域

• 用来教你怎么写代码
• 作用：生效，有用
• 域：范围，区域
• 作用域：变量（变量名，函数名）生效的范围

1.1、全局作用域

全局作用域是最大的作用域，包含了局部作用域。在全局作用域中定义的变量可以在如何地方使用

• 全局作用域在页面打开的时候创建，页面关闭时才会销毁
• 编写在 script 标签中的变量和函数，作用域为全局，在页面的任意位置都可以访问到
• 在全局作用域中有全局对象window ，代表一个浏览器窗口，由浏览器创建，可以直接调用
• 全局作用域中声明的变量和函数会作为window对象的属性和方法保存

//下面两个变量都是存在全局作用域下面的，都是可以在任意地方使用的
var num1 = 100;
var num2 = 200;
console.log(window.num1) // 100
console.log(window.num2) // 200

1.2、局部作用域

局部作用域就是在全局作用域下面，开辟出来的一个相对小一些的作用域。在 js 中只有函数能生成一个局部作用域，别的不行， 在局部作用域中定义的变量只能在这个局部作用域内部使用

• 调用函数时，函数作用域被创建，函数执行完毕，函数作用域被销毁
• 每调用一次函数就会创建一个新的函数作用域，他们之间是相互独立的

// 这个 num 是一个全局作用域下的变量 在任何地方都可以使用
var num = 100;

function fn(){
	//下面这个变量就是一个 fn 局部作用域内部的变量
	//只能在 fn 函数内部使用
	var num2 = 200;
}
fn();

二、作用域上下级

• 有了作用域以后，变量就有了使用范围，也就有了使用规则

2.1、变量定义机制

• 一个变量（函数）
• 定义在哪一个作用域里面
• 只能在当前作用域或下级作用域里使用
• 上一级作用域不能使用

// 全局作用域下的 a
var a = 100;
function fn(){
	// 局部作用域下的 b
	var b = 200;
}
fn();
console.log(a);	// 100
console.log(b);	// 报错：b is not defined

2.2、变量使用机制（作用域链）

作用域链：当代码试图访问一个变量的时候，解释器将在当前的作用域对象中查找这个属性。如果这个属性不存在，那么解释器就会在父作用域对象中查找 这个属性。就这样，一直向父作用域对象查找，直到找到该属性或者再也没有父作用域对象。我们将这个查找变量的过程中所经过的作用域对象称作作用域链 （Scope chain）

• 当你需要使用一个变量（函数）

1. 首先，在自己的作用域内部查找，如果有，就直接拿来使用
2. 如果没有，就去上一级作用域查找，如果有，就拿来用
3. 如果没有，就进行去上一级作用域查找，以此类推
4. 如果一直到全局作用域 window 都没有这个变量，那么就会直接报错（该变量 is not defined）

var num = 100;

function fn(){
	var num2 = 200;
	function fun(){
		var num3 = 300;
		//自己fun函数作用域里面有，直接拿过来用
		console.log(num3);
		//自己作用域内没有，就去上一级，就是 fn 的作用域里面找，发现有，拿过来用
		console.log(num2);
		//自己这没有，去上一级 fn 那里也没有，再上一级到全局作用域，发现有，直接用
		console.log(num);
		// 自己没有，一级一级找上去到全局都没有，就会报错
		console.log(a);
	}
	fun();
}
fn();

• 变量的使用机制也叫做作用域的查找机制
• 作用域的查找机制只能是向上找，不能向下找

function fn(){
	var num = 100;
}
fn();

console.log(num); //发现自己作用域没有，自己身处全局作用域，就没有上一级了，直接报错

2.3、变量赋值机制

• 当你想给一个变量赋值的时候，那么就先要找到这个变量，在给他赋值
• 变量赋值规则：

1. 先在自己作用域内部查找，有就直接赋值
2. 没有就去上一级作用域内部查找，有就直接赋值
3. 在没有再去上一级作用域查找，有就直接赋值
4. 如果一直找到全局作用域 window 都没有，那么就把这个变量定义为全局变量，在给他赋值（不会报错）

function fn(){
	// 声明私有变量 num ，只能在 fun 内部使用，fun 外面不能用
	var num1 = 100;
	console.log(num1);	// 100
}
fn();
console.log(num1);	// 报错

function fun(){
	// 声明私有变量 num ，只能在 fun 内部使用，fun 外面不能用
	num2 = 200;
	console.log(num2);	// 200
}
fun();
console.log(num2);	// 200

//  全局变量 num
var num;
function fn(){
	var num;
	function fun(){
		// 不声明，只赋值
		num = 100;
	}
	console.log(num);	// undefined
	fun();	// 这个函数执行完后，才给 fn 私有变量 num 赋值
	console.log(num);	// 100	
}
/*fun 调用以后，要给 num 赋值
查看自己的作用域内部没有 num 变量
就会向上一级查找,上一级 fn 有 num 变量
那么就会把 num 赋值给 fn 下的 num 变量
赋值后的 num，由于是 fn 的私有变量，所以不会再给全局变量的 num 赋值了
*/
console.log(num);	// undefined
fn();
console.log(num);	// undefined

三、作用域预解析

具体用法见：预解析：https://blog.csdn.net/qq_45677671/article/details/114988263

3.1、全局预解析

• 会在页面打开的时候就进行了
• 只解析属于全局的内容

// 刚打开页面
var a = 100;	// 会被解析
function fn(){	// 会被解析
	var b = 200;// 不会被解析
}

3.2、局部预解析

• 当函数执行的时候进行预解析
• 函数内部的预解析，只属于函数内部

// 刚打开页面
var a = 100;	// 会被解析
function fn(){	// 会被解析
	var b = 200;// 等函数执行后，才会被解析
}
fn();	// 此时函数执行了，开始解析函数内部

四、作用域预解析案例

面试案例 1：

var a = b = 10;
a = 10;
b = 10;
console.log(a);	// 10
console.log(b);	// 10

代码分析：

预解析：
1. var a;
代码执行：
1. b = 20
	此时变量赋值时，当一直到 window 都没有 b 的时候，会把 b 定义为全局变量
2. a = b
	变量使用的是 b ，赋值的是 a
3. a = 10

面试案例 2：

var a = b;	// 在这里直接报错，程序中断
a = 10;
b = 10;
console.log(a);	// 程序早就中断，不执行
console.log(b);	// 程序早就中断，不执行

代码分析：

预解析：
1. var a;
代码执行：
2. a = b
	变量 使用 和 赋值
	使用的是 b：b 没有这个变量，所以直接报错
	赋值的是 a：

面试案例 3：

fn();
var fn = 100;
function fn(){
	fn = 200;
}
console.log(fn);	// 100

代码分析：

预解析：
1. var fn
2. function fn(){}
	预解析结束的时候，fn 是一个函数
代码执行：
3. fn()
	fn = 200
	给全局的 fn 赋值，赋值为200
4. fn = 100
	给全局的 fn 赋值，赋值为100
5. console.log(fn)
	100

面试案例 4：

fn();	// 把全局 fn 赋值为 200
fn();	// 把 200 当做一个函数来执行，报错
var fn = 100;
function fn(){
	fn = 200;
}
console.log(fn);	// 程序早就中断，不执行

面试案例 5：

function fn(){
	var num = 100;
	function fun(){
		var num = num;
		console.log(num);	// undefined
	}
	fun();
}
fn();

代码分析：

fum内部 预解析：
1. var num;
代码执行：
1. num = num;
	使用的时候，num 就是 undefined
	相当于给 num 变量，赋值为undefined