Javascript 简明教程

JavaScript - Function Invocation

Function Invocation

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

The function invocation in JavaScript is the process of executing a function. A JavaScript function can be invoked using the function name followed by a pair of parentheses. When you write a function code in JavaScript, it defines the function with expressions and statements. Now, to evaluate these expressions, it is necessary to invoke the function. The function invocation is the synonym of the function call or function execution.

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

A JavaScript function can be defined using function declaration or function expression. The code inside the curly braces in the function definition are not executed when function is defined. To execute the code, we need to invoke the function.

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

The call a function and invoke a function are two interchangeable terms are commonly used. But we can invoke a function without calling it. For example, self-invoking functions are invoked without calling them.

Syntax

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

The syntax of function invocation in JavaScript is as follows –

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

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

Here 'functionName' is the function to be invoked. We can pass as many arguments as the number of parameters listed in function definition.

Example

在下面的示例中，我们定义了带两个参数的 merge() 函数。之后，我们使用函数名称来执行函数，方法是传递参数。

In the example below, we have defined the merge() function taking two parameters. After that, we used the function name to invoke the function by passing the arguments.

<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”关键字调用函数时，它作为函数构造函数。函数构造函数用于从函数定义中创建对象。

When you invoke a function with the 'new' keyword, it works as a function constructor. The function constructor is used to create an object from the function definition.

Syntax

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

Following is the syntax to invoke the function as a constructor.

const varName = new funcName(arguments);

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

In the above syntax, we invoked the function with a 'new' keyword and passed the arguments.

Example

在下面的示例中，我们将函数用作对象模板。此处，“this”关键字表示函数对象，我们使用它初始化变量。

In the example below, we use the function as an object template. Here, the 'this' keyword represents the function object, and we use it to initialize the variables.

之后，我们使用“new”关键字调用函数 car 来使用函数模板创建对象。

After that, we invoke the function car with the 'new' keyword to create an object using the function template.

<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 对象，但我们将在后续章节中介绍它。现在，让我们简单了解一下对象方法调用。

We haven’t covered JavaScript objects yet in this tutorial but we will cover it in upcoming chapters. Here, let’s learn the object method invocation in short.

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

The JavaScript object can also contain the function, and it is called the method.

Syntax

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

Following is the syntax below to invoke the JavaScript object method.

obj.func();

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

In the above syntax, the 'obj' is an object containing the method, and 'func' is a method name to execute.

Example

在以下示例中，我们已定义包含“name”属性和“getAge()”方法的“obj”对象。

In the example below, we have defined the 'obj' object containing the 'name' property and the 'getAge()' method.

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

Outside the object, we access the method by the object reference and invoke the method. In the output, the method prints 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)。若要调用这些函数，我们将函数表达式包装在分组运算符（括号）中，然后添加一对括号。

The self-invoking functions in JavaScript are executed just after they are defined. There is no need to call these types of function to invoke them. The self-invoking functions are always defined using anonymous function expression. These types of functions are also called immediately invoked function expressions (IIFEs). To invoke these function, we wrap the function expression within a grouping operator (parentheses) and then add a pair of parentheses.

Example

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

Try the following example. In this example, we define a function to show a "Hello world" message in alert box.

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

Other methods to invoke the function

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

JavaScript contains two special methods to invoke the function differently. Here, we have explained each method in the table below.

Method

Function invocation

Arguments

Call()

Immediate invocation

Separate arguments

Apply()

Immediate invocation

Array of arguments

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

The difference between the call() and apply() method is how it takes the function arguments. We will learn each of the above methods with examples in the next chapters one by one.