Re: [問題] 根據 if 決定叫用哪一個function

看板Ajax作者senser (彷彿曾經一起死過)時間14年前 (2011/09/21 13:12)推噓4(4推 0噓 3→)

留言7則, 5人參與討論串7/8 (看更多)

雖然跟原po問題無關但好像有人對為什麼 function my_function(){ do some stuff } 這種寫法不好感到好奇在網路上這篇文章有很詳細的解釋 http://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/ 但可能大家懶得看英文所以看看我能不能解釋一下可能有點長.. 首先js裡有一個東西叫做hoisting 意思就是"提起來" "拉起來" 那到底是拉甚麼東西哩? 當我們作一個declaration 被browser解讀時他會自動被放到他context的最上面比如說: (function(){ alert(my_var); var my_var = 'say something man'; })(); 這裡不會產生js的ReferenceError 因為在 interpreter 眼裡是長這樣 (function(){ var my_var = undefined; alert(my_var); my_var = 'say something man'; })(); my_var已經被定義了(雖然是assign "undefined" object) 所以firebug裡不會看到 ReferenceError: my_var is not defined 那這和function有甚麼關係哩比較以下兩例: (function(){ my_func(); var my_func= function(){ alert('yo'); }; })(); (function(){ my_func(); function my_func(){ alert('yo'); }; })(); 第一個會有 TypeError: my_func is not a function 第二個則會跑出"yo" 因為他被解讀為 (function(){ var my_func = undefined; my_func(); my_func= function(){ alert('yo'); }; })(); (function(){ function my_func(){ alert('yo'); }; my_func(); })(); 有看到差異了嗎? 在hoisting中 declaration會被整個搬上去而var xx = function yy(){};這種寫法只有左邊的部分是declaration 所以搬上去時右邊不見了這意味著甚麼呢? function yy(){};這種寫法在同一個context裡不管你寫在哪全部都呼叫的到和順序無關有人會說這超好的呀網路script就是要隨便寫都通要forgiving一點這當然沒錯就像var就有變數管他甚麼型別但是其實這種code在維護上有很大的缺點 1. 這某種層度像是種變數汙染感覺還沒寫過的東西上面卻叫得出來或是不小心用到了同樣名字會產生難預料又難debug的問題 2. Overwrite問題: (function(){ function sayHelloThenHi(){ alert('hello'); } sayHelloThenHi(); function sayHelloThenHi(){ alert('hi'); } sayHelloThenHi(); })(); 這會有甚麼結果呢? 他會跟你講兩聲hi 直觀上這是我們想要的嗎? (function(){ var sayHelloThenHi=function(){ alert('hello'); } sayHelloThenHi(); sayHelloThenHi = function(){ alert('hi'); } sayHelloThenHi(); })(); 此例中他會先說hello在說hi 感覺似乎是我們比較想要的結果至於為什麼? 相信你已經知道了結論: 那到底要怎麼寫function比較好呢 1. 如果你JAVA或是C#等等classical的語言實在太強了為什麼要為js這種詭異的prototypal語言改習慣?? 那千萬記住把function xxx(){}這種東西寫在每個context的最前面這就可以省掉大部分錯誤和麻煩 (這也就是很多js的書說宣告變數要在最前面) 2. 如果你想鑽研js這詭異的語言你的function應該大部分會出現在你global abatement的object下面如 var MySite = { my_awesome_func : function(){ //do something good } }; MySite.my_awesome_func(); //invoke 或是expression的寫法 var callback = function(){ do some useful stuff }; 這常常用於callback的傳遞... 總之你應該不會有機會寫 function bad(){ //still do something } 這種東西真是抱歉講太多廢話了.. 一打就很難停下來.. 因為國內有少數教材常會有不是很正確的觀念讓我以前剛學習時走了不少冤枉路以至於看到種觀念有關的東西我就特別想講加上js又是很特別的語言常常有人用其他語言的邏輯來套但事實上含意是不同的希望有人有耐心可以看到這裡如果有錯誤也希望可以指正:D ※ 引述《senser (彷彿曾經一起死過)》之銘言： : 您可能對於js的function宣告方式沒有很清楚 : 但我想可能很多人也有不正確的認識 : js的function宣告方式分為兩種 : function declaration和function expressions : 主要會因為hoisting 而有些微的不同 : invoke的方式大概分為四種 : 主要和this的binding有關 : 在這例子中您的設計想法是完全可行且合理的 : 只是實做上要注意 : 首先如果你加了() 就是一種invocation : 意思就是執行這function : 所以應該寫成 : $(selector).mousedown(function(){ : if(using IE){ : func1(); //invoke : }else { : func2(); //invoke : } : }); : 如果你不直接invoke : 應該用function expression : 因為functon declaration絕不應出現在{}block中 : 在if中作function declaration : 每個browser對這種錯誤會有不同的奇怪詮釋 : (新的browser supports 所謂的 function statement) : 再者也有可能因為hoisting而overwrite的問題產生 : if(using IE){ : var myHandler = func1; : }else { : var myHandler = func2; : } : $(selector).mousedown(myHandler); //function copying : 有興趣可以參考這兩篇 : http://kangax.github.com/nfe/ : http://javascriptweblog.wordpress.com/2010/07/06/function-declarations-vs-function-expressions/ : ※ 引述《coldollsheep (加油加油^^)》之銘言： : : 不好意思問一個比較粗淺的問題 : : 我做了一個按鈕點了會有聲音 : : IE 跟其他瀏覽器是採用不同的方法 : : 如以下程式碼 : : 可以看到我毎次點擊都必須判斷一次 : : //關鍵那顆鈕 : : $('#click_btn').mousedown(function (ev) : : { : : //1.處理音效 : : if ($.browser.msie) : : { : : document.getElementById("soundeffect").src=soundfile; : : } else : : { : : var _audio2 = document.createElement('audio') ; : : _audio2.src = soundfile ; : : _audio2.play() : : } : : } : : ---- : : 有沒有辦法變成這樣 : : func1() : : { : : 實際內容 : : } : : func2() : : { : : 實際內容 : : } : : //1.處理音效 : : if ($.browser.msie) : : { : : playsound() = func1(); <------這裡就是關鍵我不知道怎麼弄這裡 : : 觀念不好不好意思 : : } else : : { : : playsound() = func2(); : : } : : //關鍵那顆鈕 : : $('#click_btn').mousedown(function (ev) : : { : : //1.處理音效 : : playsound(); : : } -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 71.104.219.9 ※ 編輯: senser 來自: 71.104.219.9 (09/21 13:23)