var与function声明提升的区别-你必须知道的知识点

面试的时候遇到过这么一道题

(() => {
    console.log(a); //当时我的答案：undefined 正确答案：ƒ a(){}
    var a = 10;
    console.log(a); //10
    a = 20;
    function a(){};
    console.log(a); //我的答案：ƒ a(){} 正确答案：20
})()

当时完全没有想明白，为什么第一次打印是个function，最后一次打印怎么又变成20了？经过几番查证思考，终于想明白了各种缘由。我们都知道，var和function都具有声明提升的能力，但是却可能不太了解他们之间的区别。使用var定义变量，声明的变量会提升到作用域顶部，但是赋值操作并不会提升；使用function声明函数，整个声明语句都会得到提升。所以声明提升提升的是对函数或变量的声明，而不是赋值！
所以上述代码在javascript引擎中编译执行顺序其实是这样的

1. var a //声明变量a --此时a = undefined
2. function a(){} //声明函数a --此时a=function a(){}
3. 打印a
4. a=10 //赋值操作 --此时a=10
5. 打印a
6. a=20 //赋值操作 --此时a=20
7. 打印a

下面我们来看看使用var和function分别定义函数有什么区别

//a(); //Uncaught TypeError: a is not a function
b(); //func b --function
var a = function() {
    console.log("func a");
}
a(); //func a
var b = function(){
    console.log("func b --var");
}
function b() {
    console.log("func b --function");
}
b(); //func b --var

由上面结果我们可以知道，var声明的函数，因为声明提升只提升了变量的声明，而没有提升赋值操作，所以在赋值之前使用会报错。而function声明的函数，是整个声明语句提升，所以能在声明之前使用该函数。而同时使用var和function声明一个同名函数，在赋值操作过后，function声明的函数会被覆盖，因为声明总是先于赋值

以上仅是作者个人理解，欢迎交流探讨。