其實之前雖然剛開始學習JavaScript的時候經常看到function? add(){}、var add=function(){}、function(){}之類的這種寫法，但是具體是什么叫什么卻沒有去考慮過這個問題……

function add(){}這種寫法叫做函數聲明

var add=function(){}這種寫法叫做函數表達式

function(){}這種是匿名函數

一、函數的自執行

那么有沒有辦法讓它們不用通過我們的調用比如

function add(){}; add();

就可以自我執行呢？

我們來試試看這三種方法

//函數表達式自執行嘗試 var add=function(x,y){console.log(x y); }(5,6); //結果：11（正確） ） //函數聲明自執行嘗試 function add(x,y){console.log(x y); }(5,6); //結果：無法執行，也沒有拋出錯誤 //匿名函數自執行嘗試 function(){console.log(arguments[0] arguments[1]); }(5,6); //結果：這個的問題就大了，拋出語法錯誤Uncaught SyntaxError: Unexpected token (

函數表達式后面加括號可以立即執行函數，然而函數聲明卻不可以！！

很奇怪地，匿名函數也是函數表達式，但是它為什么會拋出語法錯誤呢？這是因為匿名函數雖然屬于函數表達式，但是很明顯它沒有賦值操作，JavaScript解析引擎會把它當做函數聲明，會跟你要一個函數名，但是它是匿名函數，肯定沒有名字，JavaScript混了，直接給你個錯誤讓你反省一下。

那要怎么解決匿名函數自執行這個問題？其實很簡單，只要告訴JavaScript解析器匿名函數不是函數聲明就好了。

//加號function(){console.log(arguments[0] arguments[1]); }(5,6); //減號 -function(){console.log(arguments[0] arguments[1]); }(5,6); //感嘆號 !function(){console.log(arguments[0] arguments[1]); }(5,6); //括號 (function(){console.log(arguments[0] arguments[1]); })(5,6); (function(){console.log(arguments[0] arguments[1]); }(5,6));

接下來就是解決函數聲明自執行的問題了，其實方法跟匿名函數自執行的方法是一樣的，加號，減號，感嘆號，括號，都可以解決

!function add(x,y){console.log(x y); }(5,6); function add(x,y){console.log(x y); }(5,6); -function add(x,y){console.log(x y); }(5,6); (function add(x,y){console.log(x y); })(5,6); (function add(x,y){console.log(x y); }(5,6));

二、變量提升、函數提升

函數聲明才會提升，函數表達式是屬于變量提升

我們先來看一下下面這段代碼的結果是什么

console.log(a); console.log(b); console.log(c); var a=1; function b(){return 2; } var c=function(){return 3; }

結果

console.log(c)的結果跟console.log(a)是一樣的，說明函數表達式是屬于變量提升的。這樣證明還是有點草率，我們再來看看下面的代碼

console.log(b()); console.log(c()); function b(){return 2; } var c=function(){return 3; }

結果

結果很明顯了，函數c只是提升了變量名c而已，函數聲明才會提升！

那么變量的提升和函數聲明的提升哪個提升的優先級比較高呢？

console.log(b); console.log(b()); var b=1; function b(){return 2; }

結果

結果顯示函數聲明提升的優先級比變量提升還要高。

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的函数的自执行，变量提升和函数提升的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。