JavaScript - 函数

上一页
下一页

JavaScript 函数是一组可重用的代码，可以在程序中的任何位置调用。它消除了一次又一次编写相同代码的需要。它可以帮助程序员编写模块化代码。函数允许程序员将一个大程序划分为许多小的、可管理的函数。

与任何其他高级编程语言一样，JavaScript 还支持使用函数编写模块化代码所需的所有功能。你一定在前面的章节中见过 alert（） 和 write（） 等函数。我们一次又一次地使用这些函数，但它们只用核心 JavaScript 编写过一次。

JavaScript 也允许我们编写自己的函数。本节介绍如何在 JavaScript 中编写自己的函数。

功能定义

在我们使用函数之前，我们需要定义它。在 JavaScript 中定义函数的最常见方法是使用 function 关键字，后跟唯一的函数名称、参数列表（可能为空）和用大括号括起来的语句块。

您需要在函数调用上执行的所有语句都必须写在大括号内。

语法

在 JavaScript 中定义函数的基本语法如下 -


function functionName(parameter-list) {
	 	 statements
}

这种类型的函数定义称为函数声明或函数语句。我们也可以使用 function expression 定义一个函数。我们将在下一章中详细讨论函数表达式。

以下示例定义了一个名为 sayHello 的函数，该函数不带任何参数 -


function sayHello() {
	 	 alert("Hello there");
}

函数表达式

JavaScript 中的 Function 表达式允许您将函数定义为表达式。函数表达式类似于匿名函数声明。函数 expression 可以分配给 varaible。

JavaScript 中函数表达式的语法如下–


const varName = function (parameter-list) {
	 	 statements
};

在下面的示例中，我们使用函数 expression 定义了一个 JavaScript 函数，并将其分配给一个可命名的 myFunc。


const myFunc = function (x, y){	
	 	return x + y;
};

调用函数

要稍后在脚本中的某个位置调用函数，您只需使用括号 （） 编写该函数的名称，如以下代码所示。

例

下面的代码显示了输出中的按钮。当您单击该按钮时，它将执行 sayHello（） 函数。sayHello（） 函数在输出中打印 “Hello there！” 消息。


<html>
<head>
	 	<script type="text/javascript">
	 	 	 function sayHello() {
	 	 	 	 	alert("Hello there!");
	 	 	 }
	 	</script>
</head>
<body>
	 	<p>Click the following button to call the function</p>
	 	<form>
	 	 	 <input type="button" onclick="sayHello()" value="Say Hello">
	 	</form>
	 	<p> Use different text in the write method and then try... </p>
</body>
</html>

功能参数

到目前为止，我们已经看到了没有参数的函数。但是有一个工具可以在调用函数时传递不同的参数。这些传递的参数可以在函数内部捕获，并且可以对这些参数进行任何操作。一个函数可以采用多个参数，以逗号分隔。

例

请尝试以下示例。我们在这里修改了 sayHello 函数。现在它需要两个参数。


<html>
	 	<head> 		
	 	 	 <script type = "text/javascript">
	 	 	 	 	function sayHello(name, age) {
	 	 	 	 	 	 document.write (name + " is " + age + " years old.");
	 	 	 	 	}
	 	 	 </script> 	 	 	
	 	</head> 		
	 	<body>
	 	 	 <p>Click the following button to call the function</p> 	 	 	
	 	 	 <form>
	 	 	 	 	<input type = "button" onclick = "sayHello('Zara', 7)" value = "Say Hello">
	 	 	 </form> 	 	 	
	 	 	 <p>Use different parameters inside the function and then try...</p>
	 	</body>
</html>

return 语句

JavaScript 函数可以具有可选的 return 语句。如果要从函数返回值，这是必需的。此语句应为函数中的最后一个语句。

例如，您可以在一个函数中传递两个数字，然后您可以期望该函数在调用程序中返回它们的乘法。

例

下面的代码定义了一个函数，该函数在调用程序中返回结果之前连接两个参数。此外，你可以看看它是如何使用 return 语句返回值的。


<html>
<head>
	 <script type="text/javascript">
	 	 	 function concatenate(first, last) {
	 	 	 	 	var full;
	 	 	 	 	full = first + last;
	 	 	 	 	return full;
	 	 	 }
	 	 	 function secondFunction() {
	 	 	 	 	var result;
	 	 	 	 	result = concatenate('Zara ', 'Ali');
	 	 	 	 	alert(result);
	 	 	 }
	 	</script>
</head>
<body>
	 	<p>Click the following button to call the function</p>
	 	<form>
	 	 	 <input type="button" onclick="secondFunction()" value="Call Function">
	 	</form>
	 	<p>Use different parameters inside the function and then try...</p>
</body>
</html>

函数作为变量值

在 JavaScript 中，函数可以与其他变量相同使用。这就是为什么说 JavaScript 有一个 first-calss 函数。这些函数可以作为参数传递给其他函数。

例

在下面的示例中，我们使用函数表达式声明了一个函数，并使用该函数与其他字符串连接。


<html>
<body>
	 	<div id = "output"> </div>
	 	<script>
	 	 	 const myFunc = function (){ return "Hello ";};
	 	 	 document.getElementById("output").innerHTML = myFunc() + "Users.";
	 </script> 	 	 	
</body>
</html>

我们在单独的章节中介绍了两个重要的概念。

打印本页
上一页
下一页