1、函数
（1）<script>标签的位置
在解析html文件时，如果把script放在头部，遇到script标签，就会先下载html文件，直到下载完所有的script文件。这样会带来一个缺点，造成网页的加载速度缓慢。因此，可以把页面事件的函数放在head中，减少页面的加载时间。
（2）函数
函数是封装了一段可以被重复执行调用的代码块，可以让代码重复使用
2、函数的声明
（1）function 函数名（形式参数）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Java Script</title> <script type="text/javascript"> function welcome() { var num1=23; var num2=12; console.log(num1+num2) } </script> </head> <body onload="welcome()" bgcolor="aquamarine"> </body> </html>
（2）var 函数名=function（形式参数）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Java Script</title> <script type="text/javascript"> var welcome=function() { var num1=23; var num2=12; console.log(num1+num2) } </script> </head> <body onload="welcome()" bgcolor="aquamarine"> </body> </html>
welcome是变量名不是函数名，因此，这种声明方式得到的函数也被称为匿名函数。
3、函数的参数
（1）实参的个数和形参的个数相等
<html>
<head>
<meta charset="UTF-8">
<title>Java Script</title>
<script type="text/javascript">
var welcome=function(num1) {
var num2=12;
console.log(num1+num2)
}
</script>
</head>
<body onload="welcome(12)" bgcolor="aquamarine">
</html>
调用函数的参数是形参，声明函数的时候是实参
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java Script</title>
<script type="text/javascript">
function welcome(name) {
alert("你好" + name);
}
</script>
</head>
<body onload="welcome('liu')" bgcolor="aquamarine">
<center>
<h1>你好</h1>
</center>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java Script</title>
<script type="text/javascript">
function welcome(name) {
alert("你好" + name);
}
</script>
</head>
<body onload="welcome('liu','zhang')" bgcolor="aquamarine">
<center>
<h1>你好</h1>
</center>
</body>
</html>
通过例子可以看出，虽然形参只有一个，但是实参可以传递两个，并且执行的效果是完全相同的。这也反映出了java script与java和c语言的不同，虽然定义的函数是传递一个参数，但是在调用函数时传递的参数的个数是不受限制的。但大多数情况下是可多不可少。
（2）实参的个数多于形参的个数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java Script</title>
<script type="text/javascript">
var welcome=function(num1) {
var num2=12;
console.log(num1+num2)
}
</script>
</head>
<body onload="welcome(12,123)" bgcolor="aquamarine">
</html>
即使实参的个数和形参的个数不相等，也不会报错，函数可以正常执行
（3）函数的实参的个数小于形参的个数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java Script</title>
<script type="text/javascript">
var welcome=function(num1,num2) {
console.log(num1+num2)
}
</script>
</head>
<body onload="welcome(12)" bgcolor="aquamarine">
</html>
形参num1有值，但是num2是undefined
（4）arguments实现参数传递
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java Script</title>
<script type="text/javascript">
function welcome(name) {
alert("你好" + arguments[0]);
}
</script>
</head>
<body onload="welcome('liu','zhang')" bgcolor="aquamarine">
<center>
<h1>你好</h1>
</center>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java Script</title>
<script type="text/javascript">
function welcome(name) {
alert("你好" + arguments[1]);
}
</script>
</head>
<body onload="welcome('liu','zhang')" bgcolor="aquamarine">
<center>
<h1>你好</h1>
</center>
</body>
</html>
可以看出arguments对象类似一个数组，可以重0开始访问实参。它是当前函数的一个内置对象，存储了传递的所有实参。
4、函数的分类：
（1）已经定义了的函数：
- 提示框：alert（）
- 控制台输出：console.log(）
（2）自定义的函数
5、函数的返回值
（1）普通情况
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Java Script</title> <script type="text/javascript"> var welcome = function() { var num1 = 23; var num2 = 12; num = num1 + num2; return num; } </script> </head> <body bgcolor="aquamarine"> <script> console.log(welcome()); </script> </body> </html>
（2）return只能返回一个值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java Script</title>
<script type="text/javascript">
var welcome=function(num1,num2) {
return num1,num2;
}
console.log(welcome(12,123));
</script>
</head>
<body bgcolor="aquamarine">
</html>
返回的结果是最后一个值
（3）一次返回多个数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java Script</title>
<script type="text/javascript">
var welcome=function(num1,num2) {
return [num1-num2,num1*num2,num1+num2];
}
console.log(welcome(12,123));
</script>
</head>
<body bgcolor="aquamarine">
</html>
数组的形式返回数据
（4）函数没有返回值则返回undefined
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java Script</title>
<script type="text/javascript">
var welcome=function(num1,num2) {
}
console.log(welcome(12,123));
</script>
</head>
<body bgcolor="aquamarine">
</html>
6、匿名函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java Script</title>
<script type="text/javascript">
</script>
</head>
<body bgcolor="aquamarine">
<script>
!function (){
num1=2;
console.log(num1);
}();
</script>
</body>
</html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Java Script</title> <script type="text/javascript"> </script> </head> <body bgcolor="aquamarine"> <script> ;(function (){ num1=2; console.log(num1); })() </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Java Script</title> <script type="text/javascript"> </script> </head> <body bgcolor="aquamarine"> <script> (function (){ num1=2; console.log(num1); }()) </script> </body> </html>
定义时直接执行，只能用一次。
好处：
（1）解决了命名冲突的问题。
（2）实现闭包。
7、一个函数调用另一个函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java Script</title>
<script type="text/javascript">
var welcome=function() {
console.log("我是函数welcome");
f();
}
welcome();
function f(){
console.log("我是被调用的函数");
}
</script>
</head>
<body bgcolor="aquamarine">
</html>
每个人都会有一段异常艰难的时光 。
生活的压力 ， 工作的失意 ， 学业的压力。
爱的惶惶不可终日。
挺过来的 ，人生就会豁然开朗。
挺不过来的 ，时间也会教你 ，怎么与它们握手言和 ，所以不必害怕的。
——杨绛
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
