【JavaScript】JS为什么要进行变量提升？

朴灿烈づ我的快乐病毒、 2022-12-01 03:44 190阅读 0赞

**前言：**

用过的JavaScript的应该都知道，它有变量提升的机制，不过可能很少去考虑为什么会有变量提升的机制，现在就来看一下为什么要进行变量提升。

#### 1. 什么是变量提升？ ####

变量提升实际上很容易理解，就是说在任何位置所声明的变量或函数，都会自动“提”到最前面，就好像它们是在函数的开头声明的一样。

#### 2. 为什么进行变量提升？ ####

首先我们要知道，JS在拿到一个变量或者一个函数的时候，会有两步操作，即解析和执行。

*  **在解析阶段**，JS会检查语法，并对函数进行预编译。解析的时候会先创建一个全局执行上下文环境，先把代码中即将执行的变量、函数声明都拿出来，变量先赋值为undefined，函数先声明好可使用。在一个函数执行之前，也会创建一个函数执行上下文环境，跟全局执行上下文类似，不过函数执行上下文会多出this、arguments和函数的参数。
    
     *  全局上下文：变量定义，函数声明
     *  函数上下文：变量定义，函数声明，this，arguments
 *  **在执行阶段**，就是按照代码的顺序依次执行。

那为什么会进行变量提升呢？主要有以下两个原因：

*  提高性能
 *  容错性更好

**（1）提高性能**

在JS代码执行之前，会进行语法检查和预编译，并且这一操作只进行一次。这么做就是为了提高性能，如果没有这一步，那么每次执行代码前都必须重新解析一遍该变量（函数），而这是没有必要的，因为变量（函数）的代码并不会改变，解析一遍就够了。

在解析的过程中，还会为函数生成预编译代码。在预编译时，会统计声明了哪些变量、创建了哪些函数，并对函数的代码进行压缩，去除注释、不必要的空白等。这样做的好处就是每次执行函数时都可以直接为该函数分配栈空间（不需要再解析一遍去获取代码中声明了哪些变量，创建了哪些函数），并且因为代码压缩的原因，代码执行也更快了。

**（2）容错性更好**

变量提升可以在一定程度上提高JS的容错性，看下面的代码：

a = 1;
    var a;
    console.log(a);

如果没有变量提升，这两行代码就会报错，但是因为有了变量提升，这段代码就可以正常执行。

虽然，我们在可以开发过程中，可以完全避免这样写，但是有时代码很复杂的时候。可能因为疏忽而先使用后定义了，这样也不会影响正常使用。由于变量提升的存在，而会正常运行。

**总结：**

*  解析和预编译过程中的声明提升可以提高性能，让函数可以在执行时预先为变量分配栈空间
 *  声明提升还可以提高JS代码的容错性，使一些不规范的代码也可以正常执行

#### 3. 变量提升导致的问题 ####

变量提升虽然有一些优点，但是他也会造成一定的问题，在ES6中提出了let、const来定义变量，它们就没有变量提升的机制。

下面来看一下变量提升可能会导致的问题：

var tmp = new Date();
    
    function fn(){ 
    	console.log(tmp);
    	if(false){ 
    		var tmp = 'hello world';
    	}
    }
    
    fn();  // undefined

在这个函数中，原本是要打印出外层的tmp变量，但是因为变量提升的问题，内层定义的tmp被提到函数内部的最顶部，相当于覆盖了外层的tmp，所以打印结果为undefined。

var tmp = 'hello world';
    
    for (var i = 0; i < tmp.length; i++) { 
    	console.log(tmp[i]);
    }
    
    console.log(i); // 11

由于遍历时定义的i会变量提升成为一个全局变量，在函数结束之后不会被销毁，所以打印出来11。