第五节:JavaScript函数

一、函数的认识

js中存在一种封装的盒子, 来对代码进行复用, 这个封装的盒子就是函数，简而言之, 就是讲一些复用的代码封装在一个函数中,通过函数在不同地方的使用来复用封装的代码
举例：

function test(){
    console.log("a");
    console.log("b");
    console.log("c");
}
if( 1 > 0 ){
    test();
}
if( 2 > 0 ){
   test();
}
if( 3 > 0 ){
   test();
}

二、函数的定义和调用

2.1函数的声明

函数的两种定义方式
1.用关键字function来定义

一.function就是英语“功能”的意思。表示这里面定义的一个功能。
二.function后面有一个空格，后面就是函数名字，函数的名字也是标识符，因此命名规范和变量命名是一样的。
三.名字后面有一对儿圆括号，里面放置参数，一会儿在介绍参数。然后就是大括号，大括号里就是封装的函数语句

function fn(){

}

2.赋值式

var fn = function(){
}

总结区别 ：
声明式函数的调用可以再定义之前也可以在定义之后
赋值式函数调用只能在定义之后 ，不能在定义之前

2.2函数的调用

函数的调用：通过函数名();

function fn(){
    console.log(111)
}
fn()

2.3函数的参数

函数的参数分为：1.形参 2.实参 3.隐藏参数
定义函数的时候，内部语句可能有一些悬而未决的量，就是变量，这些变量，我们要求在定义的时候都罗列在小括号中
例如

function fun(a){
    // 参数就相当于隐式的在函数体呢var a;
    console.log("输出" + a );
}
fun(88);

调用的时候，要把这个变量的真实的值，一起写在括号里，这样随着函数的调用，这个值也传给了a：

2.3.1参数的个数

实参和形参 多数情况下 数量都是一样的；
1.实参和形参 数量一致；一一对应关系

function fn(a,b,c){
	console.log(a*b*c);
}
 // 调用fn函数
 fn(1,2,3);  //实参和形参是一一对应关系  a = 1; b = 2; c=3;

2.实参比形参个数多 ；多的实参 在函数内部不能使用

function fn(a,b,c){
    console.log("a的值是"+a+";b的值是"+b+";c的值是"+c);
 }
fn(1,3,4,5,6); 

3.形参比实际参数多 :形参多的部分回是undefined

function fn(a,b,c){ //形参 
    console.log("a的值是"+a+";b的值是"+b+";c的值是"+c);
 }
// console.log(1*undefined)
fn(1,2);  //实参

2.3.2隐藏参数arguments

JS有一个非常强大的东西，就是每一个函数内部，都可以使用一个arguments这个类数组对象。
这个arguments对象，就涵盖了所有实参。
调用函数的时候，比如：

fun(45,436,457,34,23,12);

此时函数内部，arguments就有一个下标，就依次等于上面调用的数：

arguments[0]  // 45
arguments[1]  // 436
……
arguments[5]  //12

arguments 是隐藏参数 ，会把传入的实参放在伪数组里 ； 一般是处理不定参的问题
如果不是不定参的问题 不建议频繁使用arguments （可读性差）

2.4函数的返回值

函数可以通过参数来接收东西，更可以通过return的语句来返回值,既返回也终止

function sum(a,b){
    return a + b;       //现在这个函数的返回值就是a+b的和
}

console.log(sum(3,8));  //sum没有输出功能，就要用console.log输出
//sum(3,8)实际上就成为了一个表达式，需要计算
//计算后就是11，console.log(11);

函数只能有唯一的return，有if语句除外
程序遇见了return，将立即返回结果，返回调用它的地方，而不执行函数内的剩余的语句

function fun(){
    console.log(1);
    console.log(2);
    return;            //返回一个空值
    console.log(3);  //这行语句不执行，因为函数已经return了
}

fun();    //1, 2
console.log(fun()); //undefined

如果没有return 函数会返还什么？？
没有return 那么函数的返还值就是 undefined

function fn(){
     console.log("fn");
     return ;
 }

 var res = fn();
 console.log(res);  //undefined

函数里的return 可以返还任何值,

 // 返还基本数据类型 
function fn(){
    console.log("fn");
    return 1;
 }
 var res = fn();  // 返还啥就接收啥
 console.log(res);

// 返还复杂数据类型
// 返还数组
 function fn(){
     var arr = ['张三','李四','王五'];
     return arr;
 }
 var res = fn();
 console.log(res);
 
 //返还函数
 function fn(){
    console.log("fn");
     return function(){
         console.log("返还的函数");
    }
 }
 var res = fn();    // 执行fn函数
 console.log(res);  // 这个返还的函数  还没有执行 ；
 var myfn =   res ; //执行返还的函数
 myfn();

2.5函数声明的提升(预解析)

JS在执行前，会有一个预解析的过程，把所有的函数声明，都提升到了最最开头，然后再执行第一行语句。
所以，function定义在哪里，都不重要，程序总能找到这个函数。

//先调用
fun(); 
//然后定义
function fun(){
    alert("我是函数，我执行了！");
}

此时不会引发错误，alert能够弹出。

需要注意的是，如果使用赋值式定义函数，函数的提升是按照 变量提升规则来提升

fun();  //报错
var fun = function(){
    alert("我是函数，我执行了！");
}

2.5.1函数提升和变量提升的优先级

aaa();  //现在这个aaa到底是函数，还是变量5呢？
//函数优先，遇见同名标识符，预解析阶段一定把这个标识符给函数
var aaa = 5;        //定义一个变量，是5
function aaa(){
    alert("我是aaa函数，我执行了");
}

函数优先，现在foo这个标识符冲突了，一个函数叫做foo，一个变量也叫作foo。预解析阶段，如果遇见标识符冲突，这个标识符给函数。
函数声明的提升，是无节操的，强制提升，即使用if语句，也会提升。

2.6IIFE

IIFE就是immediately-invoked function expression，即时调用函数表达式

自执行函数：函数定义之后立刻调用
好处 ：代码多了之后可以分模块 ，代码后期 尽量不要写全局，局部不会影响全局

(function () {
     //局部作用域
    console.log("自执行函数");
    var a = 10;
     console.log(a);
     function fn() {
        console.log("fn");
    }
    fn();
 })();

例子

sum(a,b,c){
    return (function(a,b){
        return a >= b ? a : b;
    })(a,b) + c;
}

红色部分是一个IIFE，本质上是一个表达式，表达式计算之后，就是值，什么值呢？a、b中大的那个数字。

2.7递归

递归函数，递归循环 ： 函数自身调用自身

// !n  阶乘
function mul(){
    if( n == 1 || n == 0){
        return 1;
    }
    return n * mul(n - 1);
}

递归的规律,先执行的最后执行完