【JavaScript】作用域和作用域链、预编译

作用域

• JavaScript中所有的变量都具有自己的作用域，且对象和函数同属于变量，所以说函数，对象和变量都有自己的作用域
• 通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
• 作用域是对象、函数和变量的集合
• 在我们要访问变量，函数，对象的时候，需要在当前函数、对象，集合的作用域下才能访问

function demo() {
    let a = 'hello';
}

let obj = {
    //对象obj的作用域
    fn: function () {
        // 函数fn的作用域
        // 在对象obj中的fn函数内输出函数demo()中定义的变量a
        console.log(a);
    }
}
obj.fn();// a is not defined

这里在fn函数的a在本作用域内找不到变量a的定义，所以会报错a未定义

---

作用域的分类

全局作用域

定义在所有函数、对象外的变量所在可访问范围就是是全局作用域，此时这个变量也被叫做全局变量,这个变量在全局都可以访问到

// 定义一个全局变量
let c = 'ajax';

function fn2(){
    console.log(c);
    //函数内可以访问到定义在外层具有全局作用域的变量c
}
fn2();//ajax

let obj1 = {
    n:c,
}

console.log(obj1.n);//ajax    
//对象内可以访问到定义在外层具有全局作用域的变量c

局部作用域

变量在函数内被定义，此时这个局部变量所在的可被访问的范围就是局部作用域，局部作用域内的变量只能在该函数内访问到

局部作用域里也存在变量提升

function fn3(){
    let par = '定义在函数内的变量';
    // 在函数内访问变量par
    console.log(par);
}

fn3();//定义在函数内的变量

let obj2 = {
    n2:par,
    // 此作用域内的par在作用域内查找时，不能找到fn3内的变量
}

console.log(obj2);//par is not defined

js中没有块级作用域（es6之前）

• 块作用域由 { } 包括。

• 在其他编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用：

代码中 { } 即一块作用域，其中声明的变量 ，在 “{ }” 之外不能使用；JavaScript代码，不会报错 （var声明的情况下）。

if(true){
   var a = 123;
}
console.log(a);//123

js中没有块级作用域（在ES6之前）

• 使用let，const声明(es6)之后

if(true){
let a = 123;
}
console.log(a);//报错

console.log(c);//c is not defined
let c = 333;

适用let，const声明之后，不存在变量提升，但是下面这个案例看似会有变量提升，这个情况叫作暂时性死区，注意：只是类似于变量提升，let，const本身是__不存在变量提升__的

let a = 123;

function sss () {
    
    console.log(a); //Cannot access 'a' before initialization
    
    let a = 456;
} 

变量的作用域

全局变量

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

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

局部变量

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

• 局部变量只能在该函数内部使用
• 在函数内部 var 声明的变量是局部变量
• 函数的形参实际上就是局部变量

变量的作用域一般取决于变量声明时所在的作用域

全局变量和局部变量的区别

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

---

作用域链

多个函数，变量、对象定义时创建的作用域集合就是作用域链
as (作用域的集合就是作用域链),根据在 [内部函数可以访问外部函数变量] 的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链。

链式查找

函数在执行的过程中，先从自己内部寻找变量，如果找不到，再从创建当前函数所在的作用域去找，从此往上，也就是向上一级找，直到找到全局作用域还是没找到

let con = 0;
function fn1(){
    let a = 1;
    function fn2 (){
        let c = 2;
        console.log(a);
        console.log(con);
        function fn3(){
            let con = 'hello';
            console.log(con,c);
        }
        fn3()
    }
    fn2();
}

fn1();//1
	//0
	//'hello',2

---

预编译

代码执行之前，快速的预览一遍，对错误进行暴露，那么可以尽可能的提高效率。

作用域的深层理解

• 执行下下文
  - 在函数代码执行的前期 会创建一个执行期上下文内部对象 AO(作用域)
  - 这个内部的对象是预编译的时候创建出来的 因为函数被调用的时候 会先进行预编译
  - 在全局代码执行的前期会创建一个执行的上下文对象GO

• 函数作用域的预编译

  • 创建对象AO{}
  • 找形参和变量声明，将变量和形参名当做AO对象的属性名，值为undefined。
  • 实参形参相统一
  • 在函数体内找函数声明，值赋予函数体

• 全局作用域的预编译

  • 创建对象GO{}
  • -找变量声明，将变量名当做GO对象的属性名，值为undefined。
  • 找函数声明，值赋予函数体