【前端面试】js的变量提升

r囧r小猫 2022-05-31 13:11 195阅读 0赞

#### 1．JavaScript代码执行分为两个阶段： ####

*  预解析阶段：在预解析阶段，js会对以var声明的变量，和function开头的语句块进行提升，将var声明的变量和function 提升至代码的最前面。需要注意的时，function整体提升，var 声明的变量只提升变量声明，并不会在提升的同时进行赋值操作
 *  执行阶段

--------------------

#### 2.举个例子： ####

alert(a)//undefined
    var a = 1;  
    
    为什么会输出undefined呢？
    模拟提升的之后的代码 ，上一段代码相当于
     var a;  //声明一个变量。但是没有初始化
    Alert(a);
     a = 1;  //初始化为1
     
    
    
    ----------
    fun();    //在C语言中，如果不先声明函数，先调用后声明函数会报错，但是js会正常运行
    function fun(){
    	alert(“函数被声明了”);
    }
    
    代码提升后 相当于 
    function fun(){
    	alert(“函数被声明了”);
    }
    
    fun();

#### 3.多个函数同名提升规则： 都提升，但是后面的函数会覆盖掉前面函数 ####

func1();  //输出  我是后声明的函数
    function func1(){
       console.log('我是先声明的函数');
    }
    function func1(){
       console.log('我是后声明的函数');
    }
    模拟提升后的代码
    function func1(){
       console.log('我是先声明的函数');
    }
    function func1(){
       console.log('我是后声明的函数');
    }
    func1();
     函数名也是变量，后面的会覆盖前面。

#### 4.变量名和函数名相同提升规则：如果有变量和函数同名，会忽略掉变量，只提升函数 ####

alert(foo); //输出function foo(){}
    
    function foo(){
    }
    var foo = 2;
    alert(foo); //输出 2
    
    
    ----------
    
    
    模拟提升后的代码
    function foo{}
    Alert(foo);
    foo = 2;
    alert(foo);

#### 5.变量提升分作用域 ####

var num = 123;
     function test(){
         console.log(num);
         var num = 10;
     }
     test(); //输出undefined； 
    
    ----------
    
    
    模拟变量提升后的代码
      var num;
    function test(){
    var num
       console.log(num); //函数内部声明了num，但是没赋值。因为在函数内部声明了num，所以函数会使用它内部声明的num，而不会去全局中找  
       num = 10;
      }
    num = 123;

#### 6.函数表达式不会提升 ####

func();  // func is not a function
     var func = function(){
        alert("1234");
     }
    
    
    ----------
    
    
    提升后的代码
    var func;
    func();
    func = function(){
        alert("1234");
    };
     用var声明的变量(包括函数表达式)，只提升声明，不提升赋值操作

#### 7.最后再来个练习 ####

foo();
    var s1 = "qq";
    function foo() {
        console.log(s1); 
        var s1 = "tengxunqq";
        console.log(s1); 
        }

--------------------

提升后：
        var s1;
    	function foo() {
    		var s1;
            console.log(s1); //
            s1= "tengxunqq";
            console.log(s1); //t
        }
    	 s1 = "qq";
    	foo();  //先输出 undefined  后tengxunqq