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

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

函数是一组可重用的代码，它们执行特定任务并可能返回值。在 JavaScript 中，函数由关键字 function 定义。函数具有不同的部分，例如函数名、参数列表、函数体和返回语句。函数可能没有任何参数，也可能没有任何返回语句。在 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

启动您的职业生涯

完成课程获得认证

开始学习
广告