小雕雕的家

函數不管在哪種程式中都是不可或缺的好用

javascript 中函數有三種寫法與名稱，使用上也會有些差異

俺比較常用的是宣告式 + 匿名函數

第一種大概是最常用的，叫做函數宣告式

   //函數宣告式
   function add(a,b) {
      return a + b;
   }

第二種叫做具名函數 or 具名表示式

   
   //具名函數
   var addfun = function add(a,b) {
      return a + b;
   }

第三種是匿名函數，也可以叫函數的表示式

   
   //匿名函數
   var addfun = function (a,b) {
      return a + b;
   }

那麼多種是差在哪裡咧?

看了三種寫法很直覺就是除了匿名函式，其他 function 都有個名字

所以除了匿名函式之外，其他兩個都有 name 屬性

ex : add.name  // "add"

這個 name 屬性基本上在應用面是個屁，會用到幾乎都是在用工具 debug 才用到

除了這個 name 的差異，函數還有一個非常重要的特性 

在 javascript 中不論函數本身在哪裡，都會被提升到最頂端

舉例來講好了

//正確的呼叫
msg();

function msg() {
   alert('ok');
}

雖然msg 這個function在呼叫之後才定義，但是卻可正常跳出 "ok"

但是如果你用的是表示式(不管是具名還匿名)，就無法正常顯示

以下的寫法都是錯的，

//失敗的呼叫
msg();

var msg = function msgfun() {
   alert('ok');
}

或是

//也是失敗的呼叫
msg();

var msg = function() {
   alert('ok');
}

雖然上面的寫法是錯的，但是上面曾經提到所有的函數都會被提升到函數最前端

因此具名 + 匿名函數也是會被提升到最頂端，只是被提升的是變數宣告 (沒有函數的定義)

函數的其他運用可以參考上一篇的 callback 

還有一種是立即函式(數) 

基本上架構長這樣

//立即函式
(function () {
   //函式內容
   
})();

如果你曾經看過人家寫好的 jQuery Plugin ，就或多或少會看到以上這種寫法

以一般寫 jQuery Plugin 為例 (當然不見得一定要這樣寫)

因為 jQuery 是以 $ 符號來使用，但 $ 可能會被頁面其他 js 定義所覆蓋

ex : prototype 這個 js framework也有用到 $

所以可以利用立即函式來保護並執行，然後傳入 jQuery 物件到函數中使用

//需傳入一個參數
(function($) {
   $.fn.jplugin = function(){
      //plugin 內容
      
   }
})(jQuery); //傳入jQuery並執行

立即函式的構成是一個匿名 or 具名函數，外面包著一個小括號來保護

//空函數
(function(){

})

最後在函式最後加上一組括號代表立即執行

於是就變成這樣

(function(){

})();

也可以寫成這樣

(function(){

}());

立即函式的優點是可以幫助你把一堆運算包起來，又不用擔心會留下全域變數

變數生命週期只存在於函數內

立即函式還有一種用法，你可以把它存在瀏覽器的書籤列裡面，點下去就會立即執行

例如下面這段是我非常愛用的 XD

把以下這段存成瀏覽器的書籤，以後遇到有那種鎖滑鼠右鍵的網頁就點一下書籤

然後網頁的鎖滑鼠右鍵就被解開了

javascript:(function() { function R(a){ona = "on"+a; if(window.addEventListener) window.addEventListener(a, function (e) { for(var n=e.originalTarget; n; n=n.parentNode) n[ona]=null; }, true); window[ona]=null; document[ona]=null; if(document.body) document.body[ona]=null; } R("contextmenu"); R("click"); R("mousedown"); R("mouseup"); R("selectstart");})()

上面這段也是包在立即函數當中

立即函式十分好用，他也可以當作物件屬性的值

ex : 

var res = {
   msg : (function(){
      return "test";
   })()
}
res.msg; // "test";

此時的 msg 回傳的已是數值不是 function 了