全面了解函數(shù)聲明與函數(shù)表達式、變量提升
函數(shù)的聲明方式
在定義一個函數(shù)的時候通常有兩種聲明方式：
foo(){}; // 函數(shù)聲明
var foo = function(){}; // 函數(shù)表達式
不同之處
1、函數(shù)表達式后面加括號可以直接執(zhí)行
2、函數(shù)聲明會提前預(yù)解析
預(yù)解析
讓我們先看一個例子：
foo(); // 函數(shù)聲明
foo_later(); // foo_later is not a function
function foo(){ console.log('函數(shù)聲明'); }
var foo_later = function(){ console.log('函數(shù)表達式'); }
可以看到，函數(shù)聲明foo被預(yù)解析了，它可以在其自身代碼之前執(zhí)行；而函數(shù)表達式foo_later則不能。要解決這個問題，我們先要弄清楚JavaScript解析器的工作機制。
變量提升(hoist)
JavaScript解析器會在自身作用域內(nèi)將變量和函數(shù)聲明提前(hoist)，也就是說，上面的例子其實被解析器理解解析成了以下形式：
function foo(){ console.log('函數(shù)聲明'); } // 函數(shù)聲明全部被提前
var foo_later; // 函數(shù)表達式（變量聲明）僅將變量提前，賦值操作沒有被提前
foo();
foo_later();
foo_later = function(){ console.log('函數(shù)表達式'); }
這樣也就可以解釋，為什么在函數(shù)表達式之前調(diào)用函數(shù)，會返回錯誤了，因為它還沒有被賦值，只是一個未定義變量，當(dāng)然無法被執(zhí)行。
同樣的，我們也可以試著猜測下面這段代碼的輸出結(jié)果：
console.log(declaredLater); var declaredLater = "Now it's defined!"; console.log(declaredLater);
該段代碼可以被解析成一下形式：
var declaredLater; console.log(declaredLater); // undefined declaredLater = "Now it's defined!"; console.log(declaredLater); // Now it's defined!
變量聲明被提到最前（所以不會報出變量不存在的錯誤），但賦值沒有被提前，所以第一次的輸出結(jié)果是undefined。
需要注意的是
由于函數(shù)聲明會被預(yù)解析，所以不要使用此種方法來聲明不同函數(shù)。嘗試猜想下面例子的輸出結(jié)果：
if(true){
function aaa(){
alert('1');
}
}
else{
function aaa(){
alert('2');
}
}
aaa();
與我們預(yù)想的不同，該段代碼彈出的是“2”.這是因為兩個函數(shù)聲明在if語句被執(zhí)行之前就被預(yù)解析了，所以if語句根本沒有用，調(diào)用aaa()的時候直接執(zhí)行了下面的函數(shù)。
總結(jié)
通過上面的講解可以總結(jié)如下：
•變量的聲明被提前到作用域頂部，賦值保留在原地
•函數(shù)聲明整個“被提前”
•函數(shù)作為值賦給變量時只有變量“被提前”了，函數(shù)沒有“被提前”
通過練習(xí)上面的實例自己多感受一下。另外，作為最佳實踐：變量聲明一定要放在作用域/函數(shù)的最上方（JavaScript 只有函數(shù)作用域?。?。
以上這篇全面了解函數(shù)聲明與函數(shù)表達式、變量提升就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)系統(tǒng)登錄頁的登錄和驗證，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
js函數(shù)中有三個在特定場合很好用的函數(shù):reduce(),map(),filter()。而數(shù)組經(jīng)常用到的方法有push、join、indexOf、slice等等，但是有一個經(jīng)常被我們忽略的方法：reduce，這個方法簡直強大的不要不要的。下面通過這篇文章來一起學(xué)習(xí)學(xué)習(xí)吧。2016-12-12
這篇文章主要為大家介紹了去除element-ui中Dialog對話框遮罩層方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
判斷用戶是否在線的代碼，需要的朋友可以參考下。2011-03-03
這篇文章主要介紹了淺析Bootstrap驗證控件的使用 的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
本篇文章主要介紹了d3.js實現(xiàn)自定義多y軸折線圖的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要為大家詳細介紹了javascript拖拽應(yīng)用實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
JavaScript cookie的設(shè)置獲取刪除詳解
這篇文章主要介紹了JavaScript cookie的設(shè)置獲取刪除等等，,需要的朋友可以參考下2014-02-02
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
javascript的23種設(shè)計模式示例總結(jié)大全
這篇文章主要為大家介紹了javascript的23種設(shè)計模式的總結(jié)大全，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06