函数与自定义变量重名||函数提升

在js中声明函数和变量同样会有提升，因为函数本身也是一个变量。函数声明和变量声明都会置顶，但函数的优先于变量置顶。当变量名与函数名相同的时候，变量名会被先赋值成函数然后再被赋值为之前的初始值。（变量和赋值语句一起写时，会被拆成声明和赋值两个部分，声明会置顶，赋值保留原位置不变）。

var a = 3;
 function a2(){
　　a = 9;
　　console.log("a="+a);
 }
a2();     //a=9 
console.log(a);   //  9

上面一个例子是在函数名与变量名不重复的情况下，函数内部定义的全局变量a覆盖了函数外层（置顶）声明的变量a，所以输出的值都为9。这里输出的值与声明顺序有关。 当最外层变量声明在函数执行（声明）后面时，值就不会覆盖，声明是向上查询有没有的相同名称。

当函数名与变量名重复后：

var a = 3;
 function a(){
　　a = 9;
　　console.log("a="+a);
 }
a();        //a is not a function
console.log(a);    

在这里重名之后报错了，执行console.log(typeof a);查看后发现a此时为number类型。按照前面所说的函数声明置顶，我们来分解一下函数执行的步骤。

 var a=function(){
    a=9;
    console.log("a="+a);
 }
    a=3;
    a();                   //a is not a function
    console.log(a);

由此可以很清晰的看出函数置顶后，原本在顶部声明的3到函数下边来了，也就是说函数声明在前，3赋值给a后执行，a就为number类型了。（注意函数置顶后各变量的位置 ）。

接下来我们再看个例子，看看输出的结果是什么

var user="你好";
function change(){
    user="李小姐";     
    console.log(user);    
        function user(){
            console.log("好先生");
        }
}
change();                 //李小姐
console.log(user);        //你好

这个例子并有输出两个“李小姐”，而是首先输出“李小姐”然后输出“你好”，也就是说函数内部定义的那个没有var操作符的“全局变量”并没有修改最外层（顶部） 声明的user。

按照之前说的函数提升，我们来分解函数

var user="你好";
function change(){
     var  user= function user(){
            console.log("好先生");
        }
    user="李小姐";     
    console.log(user);    
}
change();                //李小姐
console.log(user);        //你好

可以看到，channge函数里面的user函数与change里面定义的user变量重名后被置顶了，重名后的user被初始化为“李小姐”：var user=”李小姐”;此时user为change函数内部变量，所以没有修改最外面（顶层）定义的user值。

我们再来把上面的函数变一下：

var user="你好";
function change(){
    user="李小姐";     
    console.log(user);    
    return;
    function user(){
            console.log("好先生");
        }
        user();       //
}
change();              //李小姐
console.log(user);      //你好

在上面的函数的change函数中增加了干扰元素return, 并在user函数下user()执行函数。 看到change函数里的return，可能觉得return后面的函数都不会执行了,change函数里面的use修改最外层user值，打印出两个“李小姐”————但是，别急~名称重复，函数置顶。 我们来分解函数：

var user="你好";
function change(){
    var user=function user(){
            console.log("好先生");
        }
    user="李小姐";     
    console.log(user);    
    return;

        user();           //
}
change();            //李小姐
console.log(user);   //你好

经过整理之后的函数可以看出，user函数在return 之前，所以还是改变了change函数中的user变量。当将函数名与变量名设置不一样后，就没有这种函数置顶的情况了。

var user="你好";
function change(){
    user="李小姐";     
    console.log(user);    
    return;
    function user2(){
            console.log("好先生");
        }
        user2();
}
change();          //李小姐
console.log(user);    //李小姐

关注公众号回复“资料”即可获得为您精心准备的前端视频学习资料