第九节JavaScript 函数的定义与使用

2023-12-19 21:05:41

一、JavaScript 函数的定义与使用

JavaScript使用关键字function定义函数。

函数可以通过声明定义，也可以是一个表达式。

1、函数的声明

语法：

function functionName(parameters) {
// 执行的代码
}

说明：声明的函数不会立即执行，会在我们需要的时候调用。

实例（调用的函数会执行一个计算，然后返回结果）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Javascript基础学习</title>
	</head>
	<body>
		<p>调用的函数会执行一个计算，然后返回结果：</p>
		<p id="one"></p>
	</body>

	<script>
		// 定义
		function getCount(a, b) {
			return a * b;
		}

		document.getElementById("one").innerHTML = getCount(5, 6);
	</script>
</html>

执行结果：

备注：

  • 分号是用来分隔可执行JavaScript语句。
  • 由于函数声明不是一个可执行语句，所以不以分号结束。

2、函数表达式

函数的表达式可以存储在变量中。

实例（函数存储在变量后，变量可作为函数使用）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Javascript基础学习</title>
	</head>
	<body>
		<p>函数存储在变量后，变量可作为函数使用：</p>
		<p id="one"></p>
	</body>

	<script>
		var result = function(a, b) {
			return a * b;
		}；

		document.getElementById("one").innerHTML = result(3, 6);
	</script>
</html>

输出结果：

说明：

  • 以上函数实际上是一个匿名函数（函数没有名称）。
  • 函数存储在变量中，不需要函数名称，通常通过变量名来调用。
  • 以上函数以分号结尾，因为它是一个执行语句。

3、Function（）构造函数

以上实例中，我们可以知道函数是通过关键字function定义的。

函数同样可以通过内置的JavaScript函数构造器（Function()）定义。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Javascript基础学习</title>
	</head>
	<body>
		<p>JavaScrip 内置构造函数。</p>
		<p id="one"></p>
	</body>

	<script>
		var result = new Function("a", "b" , "return a * b");

		document.getElementById("one").innerHTML = result(4, 6);
	</script>
</html>

运行结果：

实际上，你不必使用上述的构造函数。上面实例可以这样写：

<script>
		var result = function(a, b) {return a * b;};

		document.getElementById("one").innerHTML = result(4, 6);
</script>

运行结果：

说明：

  • 在JavaScript中，很多时候，你需要避免使用new 关键字。

4、自调用函数

函数表达式可以“自调用”。

自调用表达式会自动调用。

如果表达式后面紧跟（），则会自动调用。

不能自调用声明的函数。

通过添加括号，实现函数自调用：

<script>
		(function() {
			document.getElementById("one").innerHTML = "如果表达式后面紧跟（），则会自动调用。";
		})();
</script>

运行结果：

说明：

  • 以上函数实际上是一个匿名自我调用的函数（没有函数名）

5、函数可作为一个值使用

1）、JavaScript函数可作为一个值使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Javascript基础学习</title>
	</head>
	<body>
		<p>函数可作为一个值：</p>
		<p id="one"></p>
	</body>

	<script>
		function result(a, b) {
			return a * b;
		}
		var x = result(3, 4);

		document.getElementById("one").innerHTML = x;
	</script>
</html>

运行结果：

2）、JavaScript函数可以作为表达式使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Javascript基础学习</title>
	</head>
	<body>
		<p>函数可作为一个值：</p>
		<p id="one"></p>
		<p id="two"></p>
	</body>

	<script>
		function result(a, b) {
			return a * b;
		}
		var x = result(3, 4);
		var y = result(3, 4) * 2;
		document.getElementById("one").innerHTML = x;
		document.getElementById("two").innerHTML = y;
	</script>
</html>

运行结果：

6、函数是对象

在JavaScript中使用typeof操作符判断函数类型将返回“function”。

但是JavaScript函数描述为一个对象更加准确。

JavaScript函数有属性和方法。

toString（）方法将函数作为一个字符串返回：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Javascript基础学习</title>
	</head>
	<body>
		<p> toString() 将函数作为一个字符串返回：</p>
		<p id="one"></p>
	</body>

	<script>
		function result(a, b) {
			return a * b;
		}
		document.getElementById("one").innerHTML = result.toString();
	</script>
</html>

运行结果：

7、箭头函数

ES6新增了箭头函数。

箭头函数表达式的语法比普通函数表达式更加简洁。

1）、有多个参数时：

(参数1，参数2，......，参数N) => {函数声明}

2）、当只有一个参数时，圆括号是可选的：

（单一参数）=> {函数声明}

单一参数 => {函数声明}

3）、没有参数的函数应该写成一对圆括号：

（）=> {函数声明}

实例：

<body>
<h2>JavaScript 箭头函数</h2>
<p>IE11 及更早 IE 版本不支持箭头函数。</p>
<p id="demo"></p>
<script>
const x = (x, y) => { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>
</body>

运行结果：25

说明：

  • 有的箭头函数都没有自己的?this。 不适合定义一个?对象的方法。
  • 当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的。
  • 箭头函数是不能提升的，所以需要在使用之前定义。
  • 使用?const?比使用?var?更安全，因为函数表达式始终是一个常量。
  • 如果函数部分只是一个语句，则可以省略 return 关键字和大括号 {}，这样做是一个比较好的习惯。

文章来源:https://blog.csdn.net/yyxhzdm/article/details/135091473
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。