JavaScript - 函数调用

函数调用

JavaScript 中的函数调用是指执行函数的过程。JavaScript 函数可以通过函数名后跟一对括号来调用。在 JavaScript 中编写函数代码时，它会使用表达式和语句来定义函数。现在，为了计算这些表达式的值，需要调用该函数。函数调用与函数调用或函数执行是同义词。

JavaScript 函数可以使用函数声明或函数表达式来定义。函数定义中花括号内的代码在函数定义时不会被执行。要执行这些代码，我们需要调用该函数。

"调用函数"和"调用函数"是两个经常互换使用的术语。但我们也可以在不调用函数的情况下调用它。例如，自调用函数无需调用即可调用它们。

语法

JavaScript 中函数调用的语法如下

functionName()
或
functionName(arg1, arg2, ... argN);

这里的"functionName"是要调用的函数。我们可以传递与函数定义中列出的参数数量相同的参数。

示例

在下面的示例中，我们定义了一个接受两个参数的 merge() 函数。之后，我们使用函数名称通过传递参数来调用该函数。

<html>
<body>
   <p id = "output"> </p>
   <script>    
      function merge(str1, str2) {
         return str1 + str2;
      }
      document.getElementById("output").innerHTML = merge("Hello", " World!");  
   </script>
</body>
</html>

输出

Hello World!

函数构造函数的调用

使用"new"关键字调用函数时，它将充当函数构造函数。函数构造函数用于根据函数定义创建对象。

语法

以下是将函数作为构造函数调用的语法。

const varName = new funcName(arguments);

在上面的语法中，我们使用"new"关键字调用函数并传递参数。

示例

在下面的示例中，我们将函数用作对象模板。这里，'this' 关键字代表函数对象，我们用它来初始化变量。

之后，我们使用 'new' 关键字调用函数 car，使用函数模板创建一个对象。

<html>
<body>
   <p id = "output"> The ODCar object is: </p>
   <script>
      function Car(name, model, year) {
         this.name = name;
         this.model = model;
         this.year = year;
      }
      const ODCar = new Car("OD", "Q6", 2020);
      document.getElementById("output").innerHTML += JSON.stringify(ODCar);
   </script>
</body>
</html>

输出

The ODCar object is: {"name":"OD","model":"Q6","year":2020}

对象方法调用

本教程尚未介绍 JavaScript 对象，但我们将在接下来的章节中介绍。现在，我们来简要学习一下对象方法调用。

JavaScript 对象也可以包含函数，这被称为方法。

语法

以下是调用 JavaScript 对象方法的语法。

obj.func();

在上述语法中，"obj"是包含方法的对象，"func"是要执行的方法名称。

示例

在下面的示例中，我们定义了包含"name"属性和"getAge()"方法的"obj"对象。

在对象外部，我们通过对象引用访问并调用该方法。在输出中，该方法打印 10。

<html>
<body>
   <p id = "output">The age of John is: </p>
   <script>
      const obj = {
         name: "John",
         getAge: () => {
            return 10;
         }
      }
      document.getElementById("output").innerHTML +=  obj.getAge();
   </script>
</body>
</html>

输出

The age of John is: 10

自调用函数

JavaScript 中的自调用函数在定义后立即执行。无需调用此类函数即可调用它们。自调用函数始终使用匿名函数表达式定义。此类函数也称为立即调用函数表达式 (IIFE)。要调用这些函数，我们将函数表达式包裹在分组运算符(括号)中，然后再添加一对括号。

示例

尝试以下示例。在此示例中，我们定义了一个函数，用于在警告框中显示"Hello world"消息。

<html>
   <head>
      <script>
  	     (function () {alert("Hello World")})();
      </script>
   </head>
   <body>
   </body>
</html>

其他函数调用方法

JavaScript 包含两种特殊方法，用于以不同方式调用函数。下表解释了每种方法。

方法	函数调用	参数
Call()	立即调用	单独参数
Apply()	立即调用	参数数组

call() 和 apply() 方法的区别在于它们接收函数参数的方式。我们将在接下来的章节中通过示例逐一学习上述每一种方法。

❮ ❯

JavaScript 基础教程

JavaScript 运算符

JavaScript 控制流