js中函数执行顺序以及变量提升

Posted 2023-04-01

参考技术A 我这就不卖关子了，输出的结果分别是：2、4、1、1、2、3、3
不知你答对了吗？

下面进入重点，我们进行分析

要想计算下面这几项，我们需要先了解 js 运算符的执行顺序，可以参考这个网址： 运算符优先级

js 函数 /变量/ 以及函数中形参的预解析的顺序

//js 解析分为两个阶段：预编译和执行期
//预编译：声明但是没有初始化
//声明式：funcion a(){}
//赋值式：var a = function(){}
//匿名函数：function(){}
//-----函数之间比较
//结论 1 同一个函数声明，后来者居上
//结论 2 声明式函数要提前赋值式函数
//-----函数和变量的比较
//结论 3 函数声明提升优先级大于变量声明 函数声明要覆盖变量声明
console.log(f1)//打印的是函数
f1() //2
function f1(){
    console.log(2);
}
var f1 = function(){
    console.log(1)
}
f1(); //1

//根据结论3解析等同于
/*
//先声明
var f1 = undefined;
function f1(){}
//后执行
console.log(f1);
f1();
f1 = function(){
    console.log(1)
}
f1();
*/
 /* 声明顺序
    //1 变量声明
    //2 函数中形参声明
    //3 函数声明
 */

//测试
        (function d (num) {
            console.log(‘变量和形参比较‘+num);//100
            var num = 10;
        }(100))

        function e2 (num) {
            console.log(‘变量/函数和形参比较‘+num);//函数
            var num = 10;
            function num () {};
        }
        e2(100)
        function fn (num) {
             console.log(‘fn测试‘+num);//function
            
             function num () {};
             console.log(‘fn测试‘+num);//function
             var num =10
             console.log(num);//10
         }
         fn(100)
         //仍然是预解析(在与解析过程中还要考虑一下当前变量的作用于)
        function m () {
             console.log(a1); // underfined
             console.log(a2); // underfined
             console.log(b1); // underfined
             console.log(b2); // underfined
             if(false) {
                 console.log(3333)
                 function b1 (){};
                 var a1 = 10;
             }
             if(true) {
                 console.log(4444)

                 function b2 (){};
                 var a2 = 10;
             }
             console.log(a1); // underfined
             console.log(a2); // 10
             console.log(b1); // underfined
             console.log(b2); // function
         }
         m();