如何将 JavaScript 函数作为函数调用？

在本教程中，我们将学习如何将 JavaScript 函数作为函数调用。

函数是一组可重用的代码，用于执行特定任务，并可能返回值。在 JavaScript 中，函数由关键字 function 定义。函数具有不同的部分，例如函数名、参数列表、函数体和 return 语句。函数可能没有任何参数，也可能没有任何 return 语句。在 JavaScript 中，我们还有没有函数名的函数，称为匿名函数。

用户可以按照以下语法声明函数。

// function declaration
function function_name(parameter1, parameter2, ...){

   //function body
}
// anonymous function
let aFunc = function(paremeter1, parameter2, ...){

   //function body
}

在上述语法中，“function_name” 是函数的名称，对于匿名函数，我们需要一个变量来存储它。在这种情况下，变量是“aFunc”。“parameter1” 和“parameter2” 等是函数的参数。可以是零个或多个。如果函数有任何返回值，则在函数体之后，我们需要返回该值。

无参数调用函数作为函数

参数是在调用函数时传递给函数的信息或数据集合。函数可以有一个参数、多个参数或根本没有参数。我们必须编写函数名称并加上开括号和闭括号来调用函数。对于匿名函数，我们需要编写存储函数的变量，然后打开和关闭括号。

用户可以按照以下语法调用无参数的 JavaScript 函数。

语法

// Function call
function_name()

// Anonymous Function call
aFunc()

在上述语法中，“function_name” 是函数名，“aFunc” 是存储匿名函数的变量名。

示例

在下面的示例中，我们已将 JavaScript 函数作为函数调用。我们使用两个按钮的点击事件来调用函数。 “隐藏元素” 按钮将使用“hide” 函数隐藏“root” 元素，“显示元素” 按钮将使用存储匿名函数的“show” 变量调用来显示“root” 元素。

<html>
<body>
   <h3>Invoking a JavaScript Function as a function</h3>
   <button onclick="hide()">Hide Element</button>
   <button onclick="show()">Show Element</button>
   <div id="root" style="border: 1px solid black; padding: 10px; margin-top: 10px;">Welcome to Tutorialspoint</div>
   <script>
      let root = document.getElementById('root')
      function hide(){
         // hiding the element
         root.style.display = 'none'
      }
      let show = function(){
         // showing the element
         root.style.display = 'block'
      }
   </script>
</body>
</html>

带参数调用函数作为函数

函数参数是函数中的输入，通过使用这些参数，函数执行其任务并可能返回一些值。函数可以有多个参数，每个参数名称都必须唯一。参数的实际值称为参数。

用户可以按照以下语法调用带参数的 JavaScript 函数。

语法

// Function call
function_name(a, b, ...)

// Anonymous Function call
aFunc(a, b, ...)

在上述语法中，“function_name” 是函数名，“aFunc” 是存储匿名函数的变量名。“a”、“b” 等是函数的参数/参数。

示例

在下面的示例中，我们已将 JavaScript 函数作为函数调用。我们使用两个按钮的点击事件来调用函数 summation 和 subtraction。每个函数都接受两个参数“num1” 和“num2”，通过单击“检查求和”按钮，我们正在执行 summation 函数，该函数接受参数并返回它们的求和值。我们通过单击“检查减法”按钮执行 subtraction 函数，该函数接受参数并返回它们的减法值。我们正在网页上输出函数的返回值。

<html>
<body>
   <h3>Invoking a JavaScript Function as a function</h3>
   <p>Calculate the value of Summation and Subtraction of 10 and 4</p>
   <button onclick = "summation(10, 4)">Check Summation</button>
   <button onclick = "subtraction(10,4)">Check Subtraction</button>
   <h4 id="root" style="margin-top: 10px;"></h4>
   <script>
      let root = document.getElementById('root')
      function summation(num1, num2){
         let result = num1 + num2;
         root.innerHTML = "Summation Result: " + result;
      }
      let subtraction = function(num1, num2){
         let result = num1 - num2;
         root.innerHTML = "Subtraction Result: " + result;
      }
   </script>
</body>
</html>

在本教程中，我们学习了如何带参数和不带参数地将 JavaScript 函数作为函数调用。用户应使用这种类型的函数调用来轻松执行函数并完成任务。建议使用函数的参数将一些输入输入函数，而不是调用外部作用域变量。

更新于: 2022年9月14日

191 次查看

启动你的 职业生涯

通过完成课程获得认证

开始学习
广告