很多教程書一上來就講解一堆語法,例如函數定義、函數調用什麼。等讀者看完了函數這一章都沒搞懂什麼是函數。
在講解什麼叫函數之前,我們先看下面一段代碼:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> var sum=0; for(var i=1;i<50;i+=2) { sum+=i; } document.write("50以內所有奇數和為:"+sum); </script> </head> <body> </body> </html>
大家一看就知道了,上面代碼實現的是50以內所有奇數的和。如果要分別計算50以內所有奇數和以及100以內所有奇數和,那讀者該怎麼實現。很多人很快就寫了以下代碼:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> var sum1=0; for(var i=1;i<50;i+=2) { sum1+=i; } document.write("50以內所有奇數和為:"+sum1); document.write("<br/>"); var sum2=0; for(var j=1;j<100;j+=2) { sum2+=j; } document.write("100以內所有奇數和為:"+sum2); </script> </head> <body> </body> </html>
那我現在問一個問題,如果我要你實現50以內所有奇數和、100以內所有奇數和、150以內奇數和、200以內所有奇數和、250以內所有奇數和。那你豈不是要每次都重復編寫次類似的代碼?要是沒有一種簡單的實現方法,俺們這些程序猿還用活的?
為了解決減輕這種重復編碼的負擔,函數這種東西就應運而生。例如實現上面5個范圍以內的實現方式如下:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> //定義函數 function sum(n) { var m=0; for(var i=1;i<n;i+=2) { m+=i; } document.write(n+"以內所有奇數和為:"+m+"<br/>"); } //調用函數,計算50以內所有奇數的和 sum(50); //調用函數,計算100以內所有奇數的和 sum(100); //調用函數,計算150以內所有奇數的和 sum(150); //調用函數,計算200以內所有奇數的和 sum(200); //調用函數,計算250以內所有奇數的和 sum(250); </script> </head> <body> </body> </html>
在浏覽器預覽效果如下:
大家可以看到使用函數可以減少大量重復工作,而函數只需要采用簡單2步就可以實現了:
現在大家都知道函數是怎麼一回事了,我們來總結一下:函數,就是一個一系列JavaScript語句的集合,這是為了完成某一個會重復使用的特定功能。在需要該功能的時候,直接調用函數即可,而不必每次都編寫一大堆重復的代碼。並且在需要修改該功能的時候,也只要修改和維護這一個函數即可。
總之,將語句集合成函數,好處就是方便代碼重用。並且,一個好的函數名,可以讓人一眼就知道這個函數實現的是什麼功能,方便維護。
在接下來的課程中,我們來給大家詳細講解編程的一大利器——函數。