1. 什么是函数
- 函数具有某种特定功能的代码块。
- 函数其实本质也是一种数据，属于对象数据类型。
2. 为什么要有函数
- 解决代码的冗余问题，形成代码复用。
- 可以把整个代码项目，通过函数模块化。
- 封装代码，让函数内部的代码对外部不可见。
3. 函数的组成
函数的声明：
function 函数名（参数1，参数2，...）{
执行代码；
return 返回值；
}函数的调用：
函数名（参数1，参数2，...);函数由如下部分组成：
-
函数名，命名规则同变量名一致。
-
函数体， 函数的内容，代码块。
-
参数， 分为形参和实参。
-
返回值， 函数调用表达式的结果。
4. 定义函数的三种方式
4.1 function关键字方式/字面量方式
无参：
function 函数名() {
}
有参：
function 函数名(参数) {
}4.2 表达式方式
无参：
var 函数名 = function(){
}
有参：
var 函数名 = function(参数) {
}表达式方式 --- 匿名函数 ---匿名函数具名化
没有函数名字的函数就是匿名函数。
4.3 Function构造函数方式
var 函数名 = new Function('函数体');
var 函数名 = new Function('参数', '函数体')5. 函数调用
在函数名后面加上 () 就是对函数的调用，函数内的代码会执行。
函数名后面不加() 不会调用函数，函数内的代码也不会执行；函数名本质上是个变量名，通过函数名可以引用到函数本身。
6. 函数的返回值
6.1 返回值
- 函数名() 被称之为函数调用表达式， 表达式的值就是函数的返回值。
- 在函数体内，return 右边的表达式（或变量、直接量）便是函数的返回值。
- 函数体内没写 return 或者 return 的右边是空的，默认会返回 undefined。
- return 除了设置返回值外，还可以结束函数的执行，return 之后的代码不会执行。
6.2 那些函数需要些返回值
什么样的函数需要写返回值？
如果函数的作用是进行某种计算，得到的计算结果最后以返回值的形式返回。
什么样的函数不需要返回值？
函数的功能是实现某个具体的操作（界面操作），无需返回值。
7. 函数的参数
7.1 形参和实参
形参： 声明函数的时候，给的参数， 类似于变量名；在声明函数的时候，参数是没有值。
实参：调用函数是给的参数； 实参会按照顺序赋值给形参。
7.2 形参和实参的数量问题
正常情况下，实参数量应该等于形参数量。
如果实参数量大于形参数量， 多出来的实参，将被忽略。
如果实参数量小于形参数量， 有的形参没有对应的实参，取默认值 undefined。
7.3 形参的默认值
JS函数允许形参有默认值，有默认值的形参，在调用函数的时候，可以没有与之对应的实参！
如何实现形参的默认值？
function demo(a, b=默认值) { }
注意： 有默认值的形参一定要放在后面！7.4 arguments
- arguments 只能在函数内使用，是函数参数的集合。
- arguments 这个集合是一个类数组对象，具有数组的一些特性。类数组就是有索引，有长度，但是没有数组的方法。
- arguments可以获取所有的实参，所以我们想获取实参的话有两种方式：①用形参；②使用arguments。
用途：如计算所有参数和，取参数中的最大值，取参数中的最小值，求所有参数平均数。
<script>
//求最大值
function getMax() {
let max = arguments[0];
for (let i = 1; i < arguments.length; i++) {
max = max > arguments[i] ? max : arguments[i];
}
console.log(max);//20
}
getMax(10, 20, 0, 4, 6);
//求和
function getSum() {
let sum = 0;
for (let i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
let sum = getSum(10, 20, 0, 4, 6);
console.log(sum);//40
</script>8. 函数的嵌套
函数体内是可以再嵌套函数的。
<body>
<script>
function fnn() {
var a = 10;
function change() {
a = 20;
}
change();
console.log(a);//20
}
fnn();
</script>
</body>9. 自调用函数 IIFE
9.1 匿名函数
function() {
//匿名函数
}匿名函数声明完之后要立即调用，否则没有意义。
9.2 自调用函数
函数声明完立即调用，称之为自调用函数，也叫立即调用函数，英文简称 IIFE，英文全称 Immediately Invoked Function Expression。
自调用函数语法：
匿名函数自调：
1.无参
(function(){
})();
2.有参
(function(形参1，形参2，...){
})(实参1，实参2，...);有名字的函数自调：
1.无参
(function 函数名(){
})();
2.有参
(function 函数名(形参1，形参2，...){
})(实参1，实参2，...);案列：
// 函数允许匿名，但是匿名的函数要立即使用
// 自调用函数，立即调用函数
(function(){
console.log('哈哈哈，我被调用了');
})();
// 自调用函数 传参
(function(a, b){
console.log(a+'和'+b+'跳舞');
})('小明', '小王');
// 当然不匿名的自调用函数也是可以的，不过没有意义
(function fn(){
console.log('fn 被调用了');
})();
(function(){})();
~function(){}();
+function(){}();
-function(){}();
!function(){}();注意：
自调用函数只能自己调用自己，也不能在外面调用。
自调用函数最后必须要加；。
有名字的自调用函数，已经被自己调用过了，后面在使用函数名调用也是无效的。
两个连续的自调用函数，之间必须加分号，告诉浏览器是不同的函数，否则会有语法错误。或者，在后面的自调用函数前加 ! 等没有副作用的一元运算符。
9.3 练习
当点击不同的按钮的时候 让页面加载相应的颜色，改变屏幕的颜色 就是控制body的背景颜色。
方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数的练习</title>
</head>
</body>
<body>
<button id="redBox">红色</button>
<button id="greenBox">绿色</button>
<button id="blueBox">蓝色</button>
<button id="pinkBox">粉色</button>
<script>
function chanheBg(myColor){
document.body.style.backgroundColor = myColor;
};
let redColor = document.getElementById("redBox");
redColor.onclick = function(){
chanheBg("red");
}
let greenColor = document.getElementById("greenBox");
greenColor.onclick = function(){
chanheBg("green");
}
let blueColor = document.getElementById("blueBox");
blueColor.onclick = function(){
chanheBg("blue");
}
let pinkColor = document.getElementById("pinkBox");
pinkColor.onclick = function(){
chanheBg("pink");
}
</script>
</body>
</html>方法二：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="redBox">red</button>
<button id="greenBox">green</button>
<button id="blueBox">blue</button>
<button id="pinkBox">pink</button>
<script>
function chanheBg(myColor) {
document.body.style.backgroundColor = myColor;
};
let redColor = document.getElementById("redBox");
redColor.onclick = function() {
let value = redColor.innerText;
chanheBg(value);
}
let greenColor = document.getElementById("greenBox");
greenColor.onclick = function() {
let value = greenColor.innerText;
chanheBg(value);
}
let blueColor = document.getElementById("blueBox");
blueColor.onclick = function() {
let value = blueColor.innerText;
chanheBg(value);
}
let pinkColor = document.getElementById("pinkBox");
pinkColor.onclick = function() {
let value = pinkColor.innerText;
chanheBg(value);
}
</script>
</body>
</html>10. 箭头函数es6新增
回调函数（callback）：一个函数作为另一个函数的参数。
箭头函数就是回调函数的简化版，箭头函数不能使用arguments。
箭头函数无参语法：（）=> { } ;
箭头函数有参语法：（形参1，...）=> { } ;
案列1：
<script>
function fnn(){
console.log("fff");
}
function fun(f){
fnn();
}
//这里的实参是函数fnn
fun(fnn);//fff
</script>
案列2：
<script>
let arr = [1,2,3];
arr.map(function(){})
//简化版
arr.map(()=>{})
</script>注意！！！
去掉function变成=> ,箭头在小括号与大括号之间。
只有一个形参可以省略小括号。
只有一条语句可以省略大括号。
如果只有一条语句并且是return语句，可以省略return语句。
箭头函数无法使用arguments，可以使用三个点（... args）代替arguments。
箭头函数没有this，如果箭头函数内出现this，那这个this的作用是指向上级。
var fn=function(a,b){
return a+b
}
将上面的函数改为为箭头函数为：
var fn=(a,b)=>{
return a+b;
}
// 如果执行语句只有一条，return 也可以省去
var fn=(a,b)=> a+b;
// 如果参数只有一个，小括号也可以省去
var fn=a=>a+2;
fn(3)
var fun = (...args) => {
console.log(...args);
};
fun(12, 13, 14);11. 三个点（... args）有两种运算
... args有两种运算方法：
1. 展开运算：将数组变成单个单个的个体。
2. 剩余运算：将单个单个的个体变成一个数组。
案列1：
var fun = (...args) => {
console.log(...args);
};
fun(12, 13, 14);//[12, 13, 14]
案列2：
var fun = (a, ...args) => {
console.log(a, args);
};
fun(12, 13, 14); //a=12,args=[13, 14] 12. caller 和 callee
函数的宿主环境：函数在哪里被调用。
function outer() {
console.log(outer.caller)//当前这个函数的宿主环境是全局，所以是null
inner()；
}
outer();//null---全局
function inner() {
//这里指的是当前这个函数的宿主函数
console.log(inner.caller)//outer函数
console.log(arguments.caller)//函数本身inner
console.log(arguments.callee.caller)//相当于inner.caller
}
outer();13. 选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul,ol{
list-style: none;
}
.main{
width:500px;
margin:0 auto;
}
ul>li{
width:100px;
height:40px;
line-height: 40px;
text-align:center;
border:1px solid #333;
margin-right:10px;
display:inline-block;
position:relative;
top:1px;
}
.main>div{
height:300px;
line-height: 300px;
border:1px solid #333;
text-align:center;
display:none;
}
.main li.current{
background:darkcyan;
border-bottom-color:darkcyan;
}
.main div.current{
background:darkcyan;
display:block;
}
</style>
</head>
<body>
<div class="main" id="main">
<ul>
<li class="current">音乐</li>
<li>电视</li>
<li>综艺</li>
</ul>
<div class="current">音乐内容</div>
<div>电视内容</div>
<div>综艺内容</div>
</div>
</body>
</html>
<script>
var main=document.getElementById("main");
var lis=main.getElementsByTagName("li");
var divs=main.getElementsByTagName("div");
for(var i=0;i<lis.length;i++){
lis[i].index=i;
lis[i].onclick=function(){
for(var i=0;i<lis.length;i++){
lis[i].className="";
divs[i].className="";
}
var index=this.index;
lis[index].className="current";
divs[index].className="current";
}
}
</script>