如何將 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 函式作為方法呼叫。我們使用按鈕“顯示問候語”和點選事件來呼叫屬於物件“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 函式作為方法呼叫。我們使用兩個按鈕的點選事件來呼叫乘法和除法方法。每個函式都接受兩個引數,“num1”和“num2”,透過單擊“點選乘法”按鈕,我們正在執行乘法方法,該方法接受引數並返回它們的乘積。透過單擊“點選除法”按鈕,我們正在執行除法函式,該函式接受引數並返回它們的商。我們正在網頁上輸出函式的返回值。
<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”關鍵字使用其他物件屬性,並在執行函式後返回所需的語句。
資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP