全面瞭解函式宣告與函數運算式、變數提升，全面瞭解運算式

全面瞭解函式宣告與函數運算式、變數提升，全面瞭解運算式

函數的聲明方式

在定義一個函數的時候通常有兩種聲明方式：

foo(){};   // 函式宣告var foo = function(){};  // 函數運算式

不同之處

1、函數運算式後面加括弧可以直接執行
2、函式宣告會提前預解析

預解析

讓我們先看一個例子：

foo();     // 函式宣告foo_later();   // foo_later is not a functionfunction foo(){ console.log('函式宣告'); }var foo_later = function(){ console.log('函數運算式'); }

可以看到，函式宣告foo被預解析了，它可以在其自身代碼之前執行；而函數運算式foo_later則不能。要解決這個問題，我們先要弄清楚JavaScript解析器的工作機制。

變數提升(hoist)

JavaScript解析器會在自身範圍內將變數和函式宣告提前(hoist)，也就是說，上面的例子其實被解析器理解解析成了以下形式：

function foo(){ console.log('函式宣告'); }  // 函式宣告全部被提前var foo_later;   // 函數運算式（變數聲明）僅將變數提前，賦值操作沒有被提前foo();       foo_later();   foo_later = function(){ console.log('函數運算式'); }

這樣也就可以解釋，為什麼在函數運算式之前調用函數，會返回錯誤了，因為它還沒有被賦值，只是一個未定義變數，當然無法被執行。

同樣的，我們也可以試著猜測下面這段代碼的輸出結果：

console.log(declaredLater);  var declaredLater = "Now it's defined!";console.log(declaredLater);  

該段代碼可以被解析成一下形式：

 

var declaredLater;     console.log(declaredLater);  // undefineddeclaredLater = "Now it's defined!";console.log(declaredLater);  // Now it's defined!

 變數聲明被提到最前（所以不會報出變數不存在的錯誤），但賦值沒有被提前，所以第一次的輸出結果是undefined。

需要注意的是

由於函式宣告會被預解析，所以不要使用此種方法來聲明不同函數。嘗試猜想下面例子的輸出結果：

if(true){ function aaa(){  alert('1'); } }else{ function aaa(){  alert('2'); }}aaa();

與我們預想的不同，該段代碼彈出的是“2”.這是因為兩個函式宣告在if語句被執行之前就被預解析了，所以if語句根本沒有用，調用aaa()的時候直接執行了下面的函數。

總結

通過上面的講解可以總結如下：

•變數的聲明被提前到範圍頂部，賦值保留在原地

•函式宣告整個“被提前”

•函數作為值賦給變數時只有變數“被提前”了，函數沒有“被提前”

通過練習上面的執行個體自己多感受一下。另外，作為最佳實務：變數聲明一定要放在範圍/函數的最上方（JavaScript 只有函數範圍！）。

以上這篇全面瞭解函式宣告與函數運算式、變數提升就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。