JavaScript - 函数调用

上一页
下一页

函数调用

JavaScript 中的函数调用是执行函数的过程。可以使用函数名称后跟一对括号来调用 JavaScript 函数。当您在 JavaScript 中编写函数代码时，它使用表达式和语句定义函数。现在，要计算这些表达式，必须调用该函数。函数调用是函数调用或函数执行的同义词。

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

call a function 和 invoke a function 是两个常用的可互换术语。但是我们可以在不调用函数的情况下调用它。例如，调用自调用函数而不调用它们。

语法

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，以使用函数 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}

对象方法调用

在本教程中，我们还没有介绍 JavaScript 对象，但我们将在接下来的章节中介绍它。在这里，我们简单学习一下 Object 方法的调用。

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 中的自调用函数在定义后立即执行。无需调用这些类型的函数来调用它们。自调用函数始终使用匿名函数 expression 定义。这些类型的函数也称为立即调用的函数表达式 （IIFE）。要调用这些函数，我们将函数表达式包装在分组运算符（括号）中，然后添加一对括号。

例

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


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

调用函数的其他方法

JavaScript 包含两个特殊方法，用于以不同的方式调用函数。在这里，我们解释了下表中的每种方法。

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

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

打印本页
上一页
下一页