【JavaScript】变量提升、执行上下文、作用域、作用域链

向右看齐 2023-05-21 15:11 67阅读 0赞

### 目录 ###

*   *   *  一、 变量提升、执行上下文
         *   *   *  1.概念
                 *  2.执行上下文类型
                 *  3.执行上下文栈
                 *  4.创建执行上下文（理解）
         *  二、作用域、作用域链
         *   *   *  1.全局作用域和函数作用域
                 *  2.块级作用域
                 *  3.作用域链

### 一、 变量提升、执行上下文 ###

##### 1.概念 #####

在JavaScript中，变量提升就是说在程序中可以在变量声明之前就进行使用。JavaScript引擎在执行代码之前进行一次预编译，简单来说就是在内存中开辟一些空间，存放一些变量和函数，变量提升的概念就是HTML中的执行上下文概念。

##### 2.执行上下文类型 #####

**（1）全局执行上下文**  
任何不在函数内部的都是全局执行上下文，它首先会创建一个全局的window对象，并且设置this的值等于这个全局对象，一个程序中只有一个全局执行上下文。  
**（2）函数执行上下文**  
当一个函数被调用时，就会为该函数创建一个新的执行上下文，函数的上下文可以有任意多个。  
**（3）`eval`函数执行上下文**  
执行在eval函数中的代码会有属于他自己的执行上下文，不过eval函数不常使用，不做介绍。

##### 3.执行上下文栈 #####

*  JavaScript引擎使用执行上下文栈来管理执行上下文
 *  当JavaScript执行代码时，首先遇到全局代码，会创建一个全局执行上下文并且压入执行栈中，每当遇到一个函数调用，就会为该函数创建一个新的执行上下文并压入栈顶，引擎会执行位于执行上下文栈顶的函数，当函数执行完成之后，执行上下文从栈中弹出，继续执行下一个上下文。当所有的代码都执行完毕之后，从栈中弹出全局执行上下文。

let a = 'Hello World!';
    
    function first() { 
      console.log('Inside first function');
      second();
      console.log('Again inside first function');
    }
    
    function second() { 
      console.log('Inside second function');
    }
    
    first();
    //执行顺序
    //先执行second(),在执行first()

##### 4.创建执行上下文（理解） #####

创建执行上下文有两个阶段：**创建阶段**和**执行阶段**  
1.创建阶段

（1）this绑定

*  在全局执行上下文中，this指向全局对象（window对象）
 *  在函数执行上下文中，this指向取决于函数如何调用。如果它被一个引用对象调用，那么 this 会被设置成那个对象，否则 this 的值被设置为全局对象或者 undefined

（2）创建词法环境组件

*  词法环境是一种有**标识符——变量映射**的数据结构，标识符是指变量/函数名，变量是对实际对象或原始数据的引用。
 *  词法环境的内部有两个组件：  
    **加粗样式**：环境记录器:用来储存变量个函数声明的实际位置  
    **外部环境的引用**：可以访问父级作用域

（3）创建变量环境组件

*  变量环境也是一个词法环境，其环境记录器持有变量声明语句在执行上下文中创建的绑定关系。

2.执行阶段

此阶段会完成对变量的分配，最后执行完代码。

**简单来说执行上下文就是指：**

在执行一点JS代码之前，需要先解析代码。解析的时候会先创建一个全局执行上下文环境，先把代码中即将执行的变量、函数声明都拿出来，变量先赋值为undefined，函数先声明好可使用。这一步执行完了，才开始正式的执行程序。

在一个函数执行之前，也会创建一个函数执行上下文环境，跟全局执行上下文类似，不过函数执行上下文会多出this、arguments和函数的参数。

*  全局上下文：变量定义，函数声明
 *  函数上下文：变量定义，函数声明，`this`，`arguments`

### 二、作用域、作用域链 ###

##### 1.全局作用域和函数作用域 #####

（1）全局作用域

*  最外层函数和最外层函数外面定义的变量拥有全局作用域
 *  所有未定义直接赋值的变量自动声明为全局作用域
 *  所有window对象的属性拥有全局作用域
 *  全局作用域有很大的弊端，过多的全局作用域变量会污染全局命名空间，容易引起命名冲突。

（2）函数作用域

*  函数作用域声明在函数内部的变零，一般只有固定的代码片段可以访问到
 *  作用域是分层的，内层作用域可以访问外层作用域，反之不行

##### 2.块级作用域 #####

*  使用ES6中新增的let和const指令可以声明块级作用域，块级作用域可以在函数中创建也可以在一个代码块中的创建（由`{ }`包裹的代码片段）
 *  let和const声明的变量不会有变量提升，也不可以重复声明
 *  在循环中比较适合绑定块级作用域，这样就可以把声明的计数器变量限制在循环内部。

##### 3.作用域链 #####

*  在当前作用域中查找所需变量，但是该作用域没有这个变量，那这个变量就是自由变量。
 *  如果在自己作用域找不到该变量就去父级作用域查找，依次向上级作用域查找，直到访问到window对象就被终止，这一层层的关系就是作用域链。

var a = 100
    function F1() { 
        var b = 200
        function F2() { 
            var c = 300
            console.log(a) // 自由变量，顺作用域链向父作用域找
            console.log(b) // 自由变量，顺作用域链向父作用域找
            console.log(c) // 本作用域的变量
        }
        F2()
    }
    F1()