如何將 JavaScript 函式作為方法呼叫？

在本教程中，我們將學習如何將 JavaScript 函式作為方法呼叫。

在 JavaScript 中，函式內部的程式碼將在函式被呼叫時執行。我們可以透過多種方式呼叫函式。其中一種是使用方法。方法是物件的屬性，其值為函式。我們可以將函式定義為物件方法。此函式將具有函式名稱、引數（可選）和返回型別（可選）。它將具有“this”關鍵字，該關鍵字引用一個物件。

使用者可以按照以下語法宣告方法。

//method declaration
//declaring an Object
var ObjectName= {
   keyName : value,
   
   // declaring method
   functionName: function () {
      return this.KeyName;
   }
}

在上述語法中，“ObjectName”是物件的名稱。“keyName”是屬性，“functionName”是物件的方法。在方法“functionName”中，我們聲明瞭一個函式，該函式返回該物件 keyName 屬性的值。

無引數呼叫函式作為方法

引數是在呼叫函式時傳遞給函式的資訊或資料集合。函式可以有一個引數、多個引數或根本沒有引數。要呼叫方法，我們需要將方法名稱宣告為物件屬性，用函式名稱對其進行初始化，然後放置開括號和閉括號。

使用者可以按照以下語法將 JavaScript 函式作為無引數的方法呼叫。

語法

Var myObject= {
   methodName : function(){

      //statements of code
   }
}

//method call
myObject.methodName();

在上述語法中，“myObject”是物件名稱，方法是“methodName”，我們使用物件呼叫方法，即“myObject.methodName()”。

示例

在下面的示例中，我們已將 JavaScript 函式作為方法呼叫。我們使用“顯示問候語”按鈕和 click 事件來呼叫屬於物件“myObject”的方法“welcome”。它將透過連線屬性“greet”和“name”的兩個值來返回語句。

<html>
<body>
   <h3>Invoking a <i> JavaScript Function </i> as a method</h3>
   <button onclick="showGreeting()">Show Greeting</button>
   <div id="root" style="border: 1px solid black; padding: 10px; margin-top: 10px; display: none;"></div>
</body>
<script>
   const myObject = {
      //properties of the object
      greet: "Welcome to",
      name: "Tutorials Point",
      Welcome: function () {
         return this.greet + " " + this.name;
      }
   }
   let root = document.getElementById('root')
   function showGreeting() {
      root.innerHTML = myObject.Welcome();
      root.style.display = 'block'
   }
</script>
</html>

帶引數呼叫函式作為方法

引數是函式中的輸入，透過使用這些引數，函式執行其任務並可能返回一些值。函式可以有多個引數，並且每個引數名稱都應該唯一。我們也可以在方法中使用這些引數。為此，我們必須使用 Object 呼叫方法。

使用者可以按照以下語法將 JavaScript 函式作為帶引數的方法呼叫。

語法

// calling method
ObjectName.methodName (parameter1, parameter2, ...)

在上述語法中，“ObjectName”指的是方法所屬的物件，“methodName”是方法名稱，“parameter1”，“parameter2”，… 是方法的引數。

示例

在下面的示例中，我們已將 JavaScript 函式作為方法呼叫。我們使用兩個按鈕的 click 事件來呼叫方法 multiplication 和 division。每個函式都採用兩個引數“num1”和“num2”，透過點選“點選乘法”按鈕，我們正在執行 multiplication 方法，該方法獲取引數並返回其乘積值。我們透過點選“點選除法”按鈕來執行 division 函式，該函式獲取引數並返回其除法值。我們正在網頁上輸出函式的返回值。

<html>
<body>
   <h3> Invoking a <i> JavaScript Function </i> as a method </h3>
   <p>Perform calculation on numbers: 10 and 4</p>
   <button onclick = "myObject.multiplication(10,4)">Click to multiply</button>
   <button onclick = "myObject.division(10,4)">Click to divide</button>
   <div id = "root"> </div>
   <script>
      let root = document.getElementById('root')
      // Object declaration
      const myObject = {
         //properties of the object
         sentence1: "The multiplication between 10 and 4 is:",
         sentence2: "The division between 10 and 4 is:",
         multiplication: function (num1, num2) {
            root.innerHTML = this.sentence1 + " " + num1 * num2;
        },
        division: function (num1, num2) {
           root.innerHTML = this.sentence2 + " " + num1 / num2;
        }
      }
   </script>
</body>
</html>

在本教程中，我們學習瞭如何帶或不帶引數地將 JavaScript 函式作為方法呼叫。我們可以使用“this”關鍵字使用其他物件屬性，並在執行函式後返回所需的語句。

更新於： 2022年9月14日

1K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告