Javascript 简明教程

JavaScript - Function Invocation

Function Invocation

JavaScript 中的 function invocation 是执行函数的过程。JavaScript 函数可以使用函数名后接一对括号来调用。用 JavaScript 编写函数代码时，会使用表达式和语句定义函数。现在，为了求值这些表达式，有必要调用函数。函数调用是函数 call 或函数 execution 的同义词。

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

调用函数和执行函数这两个术语是可以互换的，通常都在使用。但我们可以在不调用函数的情况下执行函数。例如，自执行函数在不调用它们的情况下会被执行。

Syntax

JavaScript 中的函数执行语法如下 -

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

此处“functionName”是要执行的函数。我们可以传递与函数定义中列出的参数个数一样多的参数。

Example

在下面的示例中，我们定义了带两个参数的 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!

Invocation of Function Constructor

当使用“new”关键字调用函数时，它作为函数构造函数。函数构造函数用于从函数定义中创建对象。

Syntax

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

const varName = new funcName(arguments);

在上述语法中，我们使用“new”关键字调用了函数并传递了参数。

Example

在下面的示例中，我们将函数用作对象模板。此处，“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}

Object Method Invocation

本教程中我们尚未介绍 JavaScript 对象，但我们将在后续章节中介绍它。现在，让我们简单了解一下对象方法调用。

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

Syntax

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

obj.func();

在以上语法中，“obj”是包含此方法的对象，“func”是要执行的方法名。

Example

在以下示例中，我们已定义包含“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

Self-Invoking Functions

在 JavaScript 中，自调用函数在定义之后立即被执行。调用此类函数时不需要调用它们。总是使用匿名函数表达式定义自调用函数。这类函数也称为立即调用的函数表达式 (IIFE)。若要调用这些函数，我们将函数表达式包装在分组运算符（括号）中，然后添加一对括号。

Example

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

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

Other methods to invoke the function

JavaScript 包含两种特殊方法来不同地调用函数。在此，我们在下表中对每种方法进行了说明。

Method

Function invocation

Arguments

Call()

Immediate invocation

Separate arguments

Apply()

Immediate invocation

Array of arguments

call() 方法和 apply() 方法之间的区别在于它们如何获取函数参数。我们将在后续章节中逐一通过示例来学习上述每种方法。