在JavaScript中定義函數以 var foo = function () {} 和 function foo()區別介紹（詳細教學）

這篇文章主要介紹了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';
};

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

vue2.0 實作頁面導航提示引導的方法

vue2.0 根據狀態值進行樣式的改變展示方法

使用Vuex實作一個筆記應用的方法

#

以上是在JavaScript中定義函數以 var foo = function () {} 和 function foo()區別介紹（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！