1. 程式人生 > >JavaScript進階之函式

JavaScript進階之函式

1.什麼是函式

函式的作用,可以寫一次程式碼,然後反覆地重用這個程式碼。

如:我們要完成多組數和的功能。

var sum;
sum = 3+2;
alert(sum);

sum=7+8 ;
alert(sum);

…. //不停重複兩行程式碼
如果要實現8組數的和,就需要16行程式碼,實現的越多,程式碼行也就越多。所以我們可以把完成特定功能的程式碼塊放到一個函式裡,直接呼叫這個函式,就省去重複輸入大量程式碼的麻煩。

使用函式完成:

function add2(a,b){
sum = a + b;
alert(sum);
} // 只需寫一次就可以

add2(3,2);
add2(7,8);
…. //只需呼叫函式就可以

2.定義函式

如何定義一個函式呢?看看下面的格式:

function 函式名( )
{
函式體;
}
function定義函式的關鍵字,“函式名”你為函式取的名字,“函式體”替換為完成特定功能的程式碼。

我們完成對兩個數求和並顯示結果的功能。並給函式起個有意義的名字:“add2”,程式碼如下:

<script type="text/javascript">
  function add2(){
    sum = 3 + 2;
    alert(sum);
  }
  ​add2();
</script>

3.函式呼叫

函式定義好後,是不能自動執行的,需要呼叫它,直接在需要的位置寫函式名。

第一種情況:在<script>標籤內呼叫。

  <script type="text/javascript">
    function add2()
    {
         sum = 1 + 1;
         alert(sum);
    }
  add2();//呼叫函式,直接寫函式名。
</script>

第二種情況:在HTML檔案中呼叫,如通過點選按鈕後呼叫定義好的函式。

<html>
<head>
<script type="text/javascript">
   function add2
() {
sum = 5 + 6; alert(sum); }
</script> </head> <body> <form> <input type="button" value="click it" onclick="add2()"> //按鈕,onclick點選事件,直接寫函式名 </form> </body> </html>

注意:滑鼠事件會在後面講解。

4.有引數的函式

上節中add2()函式不能實現任意指定兩數相加。其實,定義函式還可以如下格式:

function 函式名(引數1,引數2)
{
函式程式碼
}
注意:引數可以多個,根據需要增減引數個數。引數之間用(逗號,)隔開。

按照這個格式,函式實現任意兩個數的和應該寫成:

function add2(x,y)
{
   sum = x + y;
   document.write(sum);
}

x和y則是函式的兩個引數,呼叫函式的時候,我們可通過這兩個引數把兩個實際的加數傳遞給函數了。

例如,add2(3,4)會求3+4的和,add2(60,20)則會求出60和20的和。

5.返回值的函式

思考:上一節函式中,通過”document.write”把結果輸出來,如果想對函式的結果進行處理怎麼辦呢?

我們只要把”document.write(sum)”這行改成如下程式碼:

function add2(x,y)
{
   sum = x + y;
   return sum; //返回函式值,return後面的值叫做返回值。
}

還可以通過變數儲存呼叫函式的返回值,程式碼如下:

result = add2(3,4);//語句執行後,result變數中的值為7。
注意:函式中引數和返回值不只是數字,還可以是字串等其它型別。