JavaScript - 函数调用
函数调用
JavaScript 中的 函数调用 是执行函数的过程。JavaScript 函数可以通过函数名后跟一对括号来调用。当你在 JavaScript 中编写函数代码时，它会使用表达式和语句定义函数。现在，为了求值这些表达式，必须调用该函数。函数调用是函数 调用 或函数 执行 的同义词。
JavaScript 函数可以使用 function declaration 或 function expression 定义。函数定义中大括号内的代码在函数定义时不会执行。要执行这些代码，我们需要调用函数。
“调用函数”和“调用函数”是两个可互换的常用术语。但我们可以在不显式调用函数的情况下调用它。例如，自调用函数就是在不调用它们的情况下被调用的。
语法
JavaScript 中函数调用的语法如下
functionName() OR 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 对象也可以包含 function，它被称为 method。
语法
以下是调用 JavaScript 对象方法的语法。
obj.func();
在上述语法中，'obj' 是一个包含 method 的 object，'func' 是要执行的 method 名称。
示例
在下面的示例中，我们定义了 'obj' object，它包含 'name' property 和 'getAge()' method。
在对象外部，我们通过对象引用访问 method 并调用它。在输出中，该 method 打印 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 中的自调用函数在定义后立即执行。无需调用这些类型的 function 即可调用它们。自调用函数总是使用 anonymous function expression 定义。这些类型的函数也被称为 immediately invoked function expressions (IIFEs)。要调用这些 function，我们将 function expression 包裹在 grouping operator（圆括号）中，然后添加一对圆括号。
示例
尝试以下示例。在这个示例中，我们定义了一个 function，在 alert box 中显示 "Hello world" 消息。
<html>
<head>
<script>
(function () {alert("Hello World")})();
</script>
</head>
<body>
</body>
</html>
调用函数的其他方法
JavaScript 包含两种特殊的 method 来以不同方式调用 function。这里，我们在下面的表格中解释了每种方法。
| Method | Function invocation | Arguments |
|---|---|---|
| Call() | Immediate invocation | Separate arguments |
| Apply() | Immediate invocation | Array of arguments |
call() 和 apply() method 之间的区别在于它如何接收 function arguments。我们将在后续章节中逐一通过示例学习上述每种方法。