JavaScript進階之函式

乘風而歸發表於2017-09-23
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。
注意:函式中引數和返回值不只是數字，還可以是字串等其它型別。

相關文章