function 寫法觀念修正

這篇文章是基於「2種 function 寫法意思大不同」所做的觀念修正。在原文提到不同的寫法會讓 function 的可重複性,以及使用性不同。不過經過各大高手指正之後,其實大略來說,這 2 種寫法並沒甚麼差,只要寫一次都可以無限使用,沒有「只能用一次」的說法。

因為這個部落格被我定位在「學習筆記」的階段,所以我想不管是錯誤或是正確的觀念,我都希望可以完整記錄起來,因此原文的錯誤觀念不會修正,會重新寫一篇記錄正確的觀念運用。

這是原本的語法:

//第一種寫法
function add(a, b){
	return a + b;
};    

//第二種寫法    
var add = function (a, b) {        
	return a + b;    
};

透過在 Facebook, Google Plus, 以及原文的留言 feedback,我想我應該有了幾個比較初步、正確的觀念:

  • 2 種寫法基本上相同,作用一樣,都可以重複呼叫並使用。
  • 使用第一種寫法,可以直接在 function 前面alert(add());;第二種寫法必須寫完 function 之後,才能alert(add());
  • 正常用法是先宣告再呼叫,速度會比較快

另外我又實驗了幾個 function 的呼叫方法,發現 jQuery 的輸出結果比較奇怪,會暗中幫你做掉某些東西:

var b = function (){
	return 1;
}; 

$(".msg1").html(b);
$(".msg2").html(b());

alert("b 輸出結果:n" + b);
alert("b() 輸出結果:n" + b());

document.write("<br />b 輸出結果:"+ b + "<br />");
document.write("b() 輸出結果:" + b() );

由範例可以看出利用 jQuery 的寫法呼叫b;,其結果跟呼叫b();出來的數值一樣。但其實使用原生的document.write呼叫b的結果才算是正常的。

以下放上這幾天相關的討論串,以及朋友推薦的閱讀文章。其實很多網友在 coding 都比我來的有經驗 (廢話),然後大家講的也蠻深的,其實我有的都看不懂,也消化不了那麼多 XD。所以這篇文章其實沒有講到很多朋友的 feedback,有興趣的話強烈歡迎大家點進去看,說不定會看到更多不同的東西喔 :)

文章整理:

You may also like...

5 Responses

  1. ChrisChen 說道:

    關於jQuery 的部分, 可以查他的API 本身就有這種用法
    http://api.jquery.com/html/
     .html( function(index, oldhtml) )
     
    jQuery 的html ApI 第一個參數可為function, 作用為selector 裡的內容會變成function 的return 值.
    可以嘗試看看在document 裡面先放好幾個DIV, 然後:
    function b (i) { return “Func B " + i; }
    1. $(“div").html(b);
    2. $(“div").html(b());
     
    就可以看出他的用法
    ========================================
    回到內容, 第一種寫法可以視為一種constructor, 有興趣的話可以去搜尋一些關於javascript 物件導向的文章, 通常英文的資料會比較多
    第二種寫法視為變數, 在你還沒assign 給他值之前是undefined. 所以一開使就呼叫add() 會出現"undefined is not a function" 之類的錯誤訊息

  2. KuroHsu 說道:

    程式裡面 $(“.msg1″).html(b); 與 $(“.msg2″).html(b()); 的結果一樣,
    是因為 jQuery 的 html() 會把 b 當作是 callback function 來執行。
     
    而用 document.write / alert “b" 與 “b()" 會出現兩種不同結果的原因是,
    " 變數 b 本身是 function “,而 " b() 是呼叫函數 b 之後 return 的結果 “。前者是 function,後者是數字。
     
    跑一下 typrof b / typeof b() 就很清楚了。

    • muki 說道:

      @KuroHsu 也是昨天朋友說了,才知道原來問題在於 callback function ><~
      typeof 應用>>筆記! 感謝庫洛

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

你可以使用這些 HTML 標籤與屬性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>