数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何将 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”关键字使用其他对象属性，并在执行函数后返回所需的语句。
1K+ 浏览量
