JavaScript 中，定義函數時用 var foo = function () {} 和 function foo() 有什麼區別？

某天寫代碼突然縣道這個問題,順勢總結一波

JavaScript 函數和變數聲明的“提前”（hoist）行為

簡單的說 如果我們使用 匿名函數

var a = {}

這種方式， 編譯後變數聲明a 會“被提前”了，但是他的賦值（也就是a）並不會被提前。

也就是，匿名函數只有在被調用時才被初始化。

如果使用

function a () {}; 

這種方式， 編譯後函數聲明和他的賦值都會被提前。

也就是說函數聲明過程在整個程式執行之前的預處理就完成了，所以只要處於同一個作用域，就可以訪問到，即使在定義之前調用它也可以。

看一個例子

function hereOrThere() { //function statement
    return 'here';
}
console.log(hereOrThere()); // alerts 'there'

function hereOrThere() {
    return 'there';
}

我們會發現alert(hereOrThere) 語句執行時會alert('there')！這裡的行為其實非常出乎意料，主要原因是JavaScript 函數聲明的“提前”行為，簡而言之，就是Javascript允許我們在變數和函數被聲明之前使用它們，而第二個定義覆蓋了第一種定義。換句話說，上述代碼編譯之後相當於

function hereOrThere() { //function statement
  return 'here';
}

function hereOrThere() {//申明前置了，但因為這裡的申明和賦值在一起，所以一起前置
  return 'there';
}

console.log(hereOrThere()); // alerts 'there'

我們期待的行為

var hereOrThere = function () { // function expression
    return 'here';
};

console.log(hereOrThere()); // alerts 'here'

hereOrThere = function () {
    return 'there';
};

這段程式編譯之後相當於：

var hereOrThere；//申明前置了

hereOrThere = function() { // function expression
  return 'here';
};

console.log(hereOrThere()); // alerts 'here'

hereOrThere = function() {
  return 'there';
};

鏈接：https://www.zhihu.com/question/19878052/answer/32361868

來源：知乎