013_JavaScript函数_js函数代码块-CSDN博客

本文链接：https://blog.csdn.net/aihiao/article/details/109529484

1. 什么是函数?

1.1. 函数是一组可以随时随地运行的语句。

1.2. JavaScript函数是被设计为执行特定任务的代码块。

1.3. 代码块的最主要用途就是编写函数体。

2. JavaScript函数语法

2.1. JavaScript函数是由这样的方式进行声明的: 关键字function、函数名、由小括号()包含的一组参数, 以及置于大括号{}中的待执行代码。

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

2.2. 函数名可包含字母、数字、下划线和美元符号(规则与标识符相同)。

2.3. 圆括号可包括由逗号分隔的参数:

(参数 1, 参数 2, ...)

2.4. 由函数执行的代码被放置在大花括号中:

{
    要执行的代码
}

2.5. 函数形参是在函数定义中所列的名称。

2.6. 函数实参是当调用函数时由函数接收的真实的值。

3. 函数返回值

3.1. 在JavaScript中, 函数返回值不必明确地声明它(像在Java中使用void那样)。

function myPrint() {
    document.write("我没有返回值。");                
}

3.2. 即使函数确实有值, 也不必明确地声明它。该函数只需要使用return关键字后跟要返回的值即可。

function myFunction(a, b) {
    return a * b;                // 函数返回a和b的乘积
}

3.3. 另一个重要概念是, 与在Java中一样, 函数在执行过return语句后立即停止代码。因此, return语句后的代码都不会被执行。

function myFunction(a, b) {  
    return a * b; 
    document.write("我这条语句不能执行。");              
}

3.4. 如果函数无返回值, 那么可以调用没有参数的return语句, 随时退出函数。

function myPrint() {
    document.write("我能输出。");
    return;
    document.write("我不能输出。");
}

3.5. 在JavaScript中, 如果函数无明确的返回值或调用了没有参数的return语句, 那么它真正返回的值是undefined。

3.6. 如果函数被某条语句调用后, 函数通常会计算出返回值, 然后把这个返回值返回给调用者。

4. 函数调用

4.1. 函数中的代码将在其他代码调用该函数时执行:

当事件发生时调用函数(当用户点击按钮时调用函数)。
在其它JavaScript代码中调用函数。
函数自调用。

4.2. ()运算符调用函数

4.2.1. 函数名称引用的是函数对象。使用没有()的函数名, 将返回函数的定义。

4.2.2. 函数名称+()引用的是函数结果。

4.3. 实例

function myFunction(a, b) {
    return a * b;                
}

window.alert(myFunction);
window.alert(myFunction(7, 8));

5. 用作变量值的函数

5.1. 使用变量来存储函数的值, 您能够把函数当做变量值直接使用。

function myFunction(a, b) {
    return a * b;                
}

var x = myFunction(7, 8);        // 调用函数, 返回值被赋值给x
window.alert(x);

6. 使用变量引用函数

6.1. 还可以使用变量引用函数, 然后使用变量+()的形式调用函数。

function myFunction(a, b) {
    return a * b;                
}

var x = myFunction;        // 引用函数
window.alert(x(7, 8));

7. 例子

7.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>JavaScript函数</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<script type="text/javascript">
			function myFunction(a, b) {
				var str = "函数内的局部变量";
    			return a * b;                
			}

			var value = myFunction(8, 9); // 用作变量值的函数
			var x = myFunction;        // 使用变量引用函数

			document.write(myFunction + '<br />'); // 输出函数的定义

			document.write('myFunction(8, 9) = ' + value + '<br />');
			document.write('x(7, 8) = ' + x(7, 8) + '<br />'); // x(7, 8)使用变量引用函数

			function sayHello() {
				document.write('hello everybody.<br />')
			}
			document.write('没有明确返回值的函数返回值: ' + sayHello() + '<br />');
		</script>
	</body>
</html>

7.2. 效果图

8. 匿名函数

8.1. 没有名称的函数称为匿名函数。

8.2. 没有函数名的函数是函数表达式

function (a, b) {return a * b;};

8.3. 存放在变量中的函数不需要函数名, 他们总是使用变量名调用:

var x = function (a, b) {return a * b};
var z = x(4, 3);

8.4. 例子

8.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>匿名函数</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<script type="text/javascript">
			var x = function (a, b) {return a * b};
			var z = x(4, 3);

			document.write(z + '<br />');
		</script>
	</body>
</html>

8.4.2. 效果图

9. 自调用函数

9.1. 函数表达式会自动执行, 假如表达式后面跟着()。

9.2. 您无法对函数声明进行自调用。

9.3. 您需要在函数周围添加括号, 以指示它是一个函数表达式:

(function () {
    return "hello!"; // 我会调用我自己
})();

9.4. 例子

9.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>自调用函数</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<script type="text/javascript">
			var value = (function () {
			    return "hello!"; // 我会调用我自己
			})();

			document.write(value + '<br />');
		</script>
	</body>
</html>

9.4.2. 效果图

10. 箭头函数

10.1. 箭头函数允许使用简短的语法来编写函数表达式。

10.2. 您不需要function关键字, 甚至是return关键字和花括号。

10.3. 如果函数是单个语句, 则可以省略return关键字和大括号:

var value = function(x, y) {
	return x * y;
}
// 上面的函数和下面的箭头函数是等价的
var value = (x, y) => x * y;

10.4. 保留它们可能是一个好习惯:

var value = (x, y) => { return x * y };

10.5. 箭头函数没有自己的this。它们不适合定义对象方法。

10.6. 例子

10.6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>箭头函数</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<script type="text/javascript">
			var fun = (x, y) => x * y;
			document.write(fun(7, 8) + '<br />');

			var myFun = (x, y) => {
				var value = x + y;
				document.write(x + y + ' = ' + value);
			};
			myFun(3.14, 9);
		</script>
	</body>
</html>

10.6.2. 效果图