JS作用域+作用域链+预解析

JS作用域：就是代码名字(变量)在某个范围内起作用和效果。

(es6即es2015)之前分为：全局作用域和局部作用域(函数作用域)。

全局作用域：

直接编写在 script 标签之中的JS代码，都是全局作用域；

或者是一个单独的 JS 文件中的。

全局作用域在页面打开时创建，页面关闭时销毁；

在全局作用域中有一个全局对象 window（代表的是一个浏览器的窗口，由浏览器创建），可以直接使用。

1、在全局作用域下声明的变量叫做 全局变量（在函数外部定义的变量）

2、全局变量在全局（代码的任何位置）下都可以使用；全局作用域中无法访问到局部作用域中的变量。

3、全局变量第一种创建方式：在全局作用域下 var声明的变量是全局变量

4、全局变量第二种创建方式：如果在函数内部，没有使用 var关键字声明直接赋值的变量也属于 全局变量。（不建议使用）

<script>
var num = 10;
    function fn(){
        console.log(num);
    }
fn();
console.log(num);
</script>

（变量 num 直接写在 script标签下，所以 num是全局变量。）

局部作用域（函数作用域）：

在函数内部就是局部作用域，这个代码的名字只在函数的内部起作用

调用函数时创建函数作用域，函数执行完毕之后，函数作用域销毁；

每调用一次函数就会创建一个新的函数作用域，它们之间是相互独立的。

1、在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）

2、局部变量只能在函数内部使用，在局部作用域中可以访问到全局变量。

3、在函数内部 var 声明的变量就是局部变量；

4、函数的形参实际上就是局部变量；

<script>
    function fun(){
        var num1 = 10;
        num2 = 20;
        console.log(num1);
    }
    fun();
    console.log(num2);
</script>

作用域链

只要是代码，就有一个作用域，写在函数内部的就叫做局部作用域；

如果函数中还有函数，那么在这个作用域中又可以诞生一个作用域；

当在函数作用域中操作一个变量的时候，会先在自身作用域中查找，如果有就直接使用，如果没有就向上级作用域中寻找。如果全局作用域中也没有，那么就报错。

根据内部函数可以访问可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称为函数作用域链。

作用域链：内部函数访问外部函数的变量，采取的是链式查找的方法来决定取那个结构，这种结构称之为作用域链。

作用域链的原则：就近原则

（作用域链采用链式查找的方式，一层一层向上查找，先查找外面的嵌套的函数是否有所需内容，找到就输出相应的结果，如果没有再向上查找。就近原则）

预解析

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

<script>
//案例1：
var num = 10;
fun();
function fun() {
	console.log(num);
	var num = 20;
} //结果是undefined
//预解析后相当于
var num;
function fun() {
	var num;
	console.log(num);
	num = 20;
}
	num = 10;
	fun();

//案例2：
var num = 10;
function fn() {
	console.log(num);
	var num = 20;
	console.log(num);
}
	fn();
//相当于
var num;
function fn() {
	var num;
	console.log(num);
	num = 20;
	console.log(num);
}
num = 10;
fn();


//案例3：
var a = 18;
f1();
function f1() {
	var b = 9;
	console.log(a);
	console.log(b);
	var a = '23';
}
//相当于
var a;
function f1() {
	var b;
	var a;
	b = 9;
	console.log(a); //undefined
	console.log(b); //9
	a = '123';
}
f1();

//案例4
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
	var a = b = c = 9;
//相当于var a=9;b=9;c=9;
	console.log(a);
	console.log(b);
	console.log(c);
}
//相当于
function f1() {
	var a;
	a = b = c = 9;
	console.log(a);
	console.log(b);
	console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);
</script>