JavaScript - 函式

在 JavaScript 中，函式是一組可重用的程式碼，可以在程式的任何地方呼叫。它消除了重複編寫相同程式碼的需要，有助於程式設計師編寫模組化程式碼。函式允許程式設計師將大型程式劃分為許多小型易於管理的函式。

像任何其他高階程式語言一樣，JavaScript 也支援使用函式編寫模組化程式碼所需的所有功能。您可能在前面的章節中看到過諸如 alert() 和 write() 之類的函式。我們一直在使用這些函式，但它們只在核心 JavaScript 中編寫過一次。

JavaScript 也允許我們編寫自己的函式。本節解釋如何在 JavaScript 中編寫自己的函式。

函式定義

在使用函式之前，我們需要定義它。在 JavaScript 中定義函式最常見的方法是使用 function 關鍵字，後跟唯一的函式名、引數列表（可能是空的）以及用花括號括起來的語句塊。

您需要在函式呼叫中執行的所有語句都必須寫在花括號內。

語法

在 JavaScript 中定義函式的基本語法如下：

function functionName(parameter-list) {
    statements
}

這種型別的函式定義稱為函式宣告或函式語句。我們也可以使用函式表示式來定義函式。我們將在下一章詳細討論函式表示式。

以下示例定義了一個名為 sayHello 的函式，該函式不帶引數：

function sayHello() {
    alert("Hello there");
}

函式表示式

JavaScript 中的函式表示式允許您將函式定義為表示式。函式表示式類似於匿名函式宣告。函式表示式可以賦值給變數。

JavaScript 中函式表示式的語法如下：

const varName = function (parameter-list) {
    statements
};

在下面的示例中，我們使用函式表示式定義了一個 JavaScript 函式，並將其賦值給名為 myFunc 的變數。

const myFunc = function (x, y){ 
   return x + y;
};

呼叫函式

要在指令碼中的其他位置呼叫函式，只需編寫該函式的名稱以及括號 ()，如下面的程式碼所示。

示例

以下程式碼在輸出中顯示按鈕。單擊按鈕時，它將執行 sayHello() 函式。sayHello() 函式在輸出中列印“Hello there!”訊息。

<html>
<head>
   <script type="text/javascript">
      function sayHello() {
         alert("Hello there!");
      }
   </script>
</head>
<body>
   <p>Click the following button to call the function</p>
   <form>
      <input type="button" onclick="sayHello()" value="Say Hello">
   </form>
   <p> Use different text in the write method and then try... </p>
</body>
</html>

函式引數

到目前為止，我們已經看到了沒有引數的函式。但是，在呼叫函式時，可以使用不同的引數。這些傳遞的引數可以在函式內部捕獲，並且可以對這些引數進行任何操作。函式可以採用多個引數，用逗號隔開。

示例

嘗試以下示例。我們在這裡修改了 sayHello 函式。現在它接受兩個引數。

<html>
   <head>   
      <script type = "text/javascript">
         function sayHello(name, age) {
            document.write (name + " is " + age + " years old.");
         }
      </script>      
   </head>   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "sayHello('Zara', 7)" value = "Say Hello">
      </form>      
      <p>Use different parameters inside the function and then try...</p>
   </body>
</html>

return 語句

JavaScript 函式可以包含可選的 return 語句。如果您想從函式返回一個值，則需要此語句。此語句應為函式中的最後一條語句。

例如，您可以將兩個數字傳遞給函式，然後您可以期望函式在呼叫程式中返回它們的乘積。

示例

下面的程式碼定義了一個函式，該函式連線兩個引數，然後在呼叫程式中返回結果。此外，您還可以檢視它如何使用 return 語句返回值。

<html>
<head>
  <script type="text/javascript">
      function concatenate(first, last) {
         var full;
         full = first + last;
         return full;
      }
      function secondFunction() {
         var result;
         result = concatenate('Zara ', 'Ali');
         alert(result);
      }
   </script>
</head>
<body>
   <p>Click the following button to call the function</p>
   <form>
      <input type="button" onclick="secondFunction()" value="Call Function">
   </form>
   <p>Use different parameters inside the function and then try...</p>
</body>
</html>

函式作為變數值

在 JavaScript 中，函式可以像其他變數一樣使用。這就是為什麼說 JavaScript 具有頭等函式。函式可以作為引數傳遞給其他函式。

示例

在下面的示例中，我們使用函式表示式聲明瞭一個函式，並使用該函式與其他字串進行連線。

<html>
<body>
   <div id = "output"> </div>
   <script>
      const myFunc = function (){ return "Hello ";};
      document.getElementById("output").innerHTML = myFunc() + "Users.";
  </script>      
</body>
</html>

我們在單獨的章節中介紹了兩個重要的概念。

列印頁面