1.變數宣告提前

JavaScript引擎的工作方式是，先解析程式碼，獲取所有被宣告的變數，然後再一行一行的執行。這造成的結果就是，所有的變數的宣告語句都會提升到程式碼的頭部，這就叫做變數提升。

function b(){
  console.log(a);  //undefined 
  var a = '哈哈';  //宣告變數a並且給a賦值哈哈
  console.log(a)  //哈哈
}
b()

上面程式碼等同：

function b(){
  var a;
  console.log(a);
  a = '哈哈';
  console.log(a)
}
b()

只是宣告提前，賦值並不會提前。

2.函式宣告提前

JavaScriplt一共有三種方法定義函式：函式宣告、函式表示式、建構函式。

• 函式宣告

function print(s){
    console.log(s);
}

• 函式表示式

var print = function (s){
  console.log(s)  
};

• 建構函式

var add = new Function('x', 'y', 'return x + y');
//等同於
function add(x, y){
    return x + y
}

在同一作用域中，函式宣告會提升至此作用域的最頂端 (只有函式宣告會提升）。

console.log(a)  //
 
function a(){console.log('哈哈')}
function a(){
   console.log('哈哈')         
}

上面的程式碼等同於：

function a(){
    console.log('哈哈')
}
console.log(a)

如果是函式表示式，函式不會提升。函式表示式與其他的表示式一樣，在使用前必須先賦值。

console.log(f)  //undefined
var f = function (){
  console.log("haha")  
}
console.log(f) //function(){console.log("haha")}
 

上面程式碼等同於:

var f;
console.log(f） 
f = function(){
    console.log("haha")
}
console.log(f)  

3.宣告提前的先後順序

如果變數名和函式名相同，那麼誰會提升至更前呢？

console.log(a);
var a = "哈哈";
function a(){
    console.log("哼哼")
}
console.log(a); //哈哈

上面程式碼等同於：

function a(){ 
    console.log("哼哼")
}
var a；
console.log(a); //function a(){console.log("哼哼")}
a = "哈哈"; //此時給a賦值"哈哈" 
console.log(a) //哈哈

函式提前之後又聲明瞭變數a，打印出來的為什麼是函式而不是undefined呢？因為使用var重新宣告一個已經存在的變數，是無效的（會直接忽略）。

var a = 3;
var a;
console.log(a); //3

變數a已經宣告並賦值，再次宣告而沒有賦值，這種宣告方式會直接忽略，所以還是會輸出3。

4.參考內容

https://wangdoc.com/javascript/basic/grammar.html

https://wangdoc.com/javascript/types/function.html