第九节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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。