JS作用域、预解析

概念

Javascript作用域 就是代码名字（变量）在某个范围内起作用和效果 目的是为了提高程序的可靠性更重要的是减少命名冲突
全局作用域：整个script标签，或者是一个单独的js文件
局部作用域：在函数内部就是局部作用域，这个代码的名字只是在函数内部起作用和效果。

变量的作用域

定义

• 全局变量：在全局作用域下声明的变量叫做全局变量(在函数外部定义的变量)

1. 全局变量在代码的任何位置都可以使用
   2.特殊情况下，在函数内不使用var声明的变量也是全局变量（不建议使用）

• 局部变量：在局部作用域下声明的变量叫做局部变量（在函数内部定于的变量）

1.局部变量只能在该函数内部使用
2. 函数的形参实际上就是局部变量

二者的区别

全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间。

作用域链

作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值，这种结构我们称之为作用域链。（就近原则)

预解析

1. 浏览器的JS引擎运行JS代码分为两步：预解析和代码执行
   （1）预解析
   js引擎会把js中所有的var 还有function提升到当前作用域的最前面
   (2) 代码执行
   按照代码书写的顺序从上往下执行
2. 预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）
   （1）变量提升：就是把所有的变量声明提升到当前的作用域最前面，但是不提升赋值操作

// 案例一
console.log(num);
var num = 10 // 输出：undefined
// 相当于执行了以下代码
var num;
console.log(num)
num = 10

// 案例二
fun();
var fun = function() {
console.log(22)
} // 输出：报错
// 相当于执行了一下操作
var fun;
fun()
fun = function() {
console.log(22)
}

(2) 函数提升：就是把所有的函数声明提升到当前作用域的最前面，但是不调用函数,所以函数的调用语句写在函数声明之前和函数声明之后都可以

fn();
function fn() {
console.log(11)
}// 输出：正常输出
// 相当于执行了以下代码
function fn(){
console.log(11)
}
fn()

预解析案例

案例一

			var num = 10;
			fun()
			function fun() {
				console.log(num)
				var num = 20
			}
			// 相当于执行了以下代码
			var num
			function fun() {
				var num
				console.log(num) // undefined
				num = 20
			}
			num = 10
			fun()
// 输入undefined

案例二

			var num = 10
			function fn() {
				console.log(num)
				var num = 20
				console.log(num)
			}
			fn()
			// 相当于执行以下代码
			var num
			function fn() {
				var num
				console.log(num) // undefined
				num = 20
				console.log(num) // 20
			}
			num = 10
			fn()

案例三

// 案例3
			var a = 18;
			f1();
			function f1() {
				var b =9 ;
				console.log(a)
				console.log(b)
				var a = '123'
			}
			// 相当于执行以下代码
			var a
			function f1() {
				var b
				var a
				b =9 ;
				console.log(a) // undefined
				console.log(b) // 9
				a = '123'
			}
			a = 18
			f1()

案例四

	// 案例四	
			f1();
			console.log(c);
			console.log(b);
			console.log(a);
			function f1() {
				var a = b = c = 9;
				// 相当于 var a = 9; b = 9; c = 9
				// 集体声明 var a = 9, b = 9, c = 9 相当于 var a = 9, var b = 9, var c = 9
				console.log(a);
				console.log(b);
				console.log(c)
			}
			// 相当于执行以下代码
			function f1() {
				var a
				a = 9;
				b = 9;
				c = 9;
				console.log(a); // 9
				console.log(b); // 9
				console.log(c)  // 9
			}
			f1();
			console.log(c); // 9
			console.log(b); // 9
			console.log(a); // 报错