前端的函数参数和回调函数（加些小案例）

一、参数

1.1 形参和实参

• 如果实参数量小于形参数量 那么最后没有赋值形参则是undefined
• 如果形参属性小于实参数量，那么多出来的实参无法从形参上获取

function fn1(a,b,c){
            
            console.log(a,b,c);
        }
        fn1(1,2,3);
结果：1 2 3

function fn1(a,b,c){
            if(c===undefined){
                c=b;
                b=undefined;
            }
            console.log(a,b,c);
        }
        fn1(1,2);   
结果：1 undefined 2

• 形参初始值，当实参没有传入对应的值，默认是形参初始值（实参是undefined），如果传入值则是传入的值
• 必要的形参定义在函数的前面，非必要的形参定义在后面，大多数的初始值都是针对非必要形参
• 因为js是弱引用类型，所以参数是不需要设置类型的
• 如果封装的函数被别人使用时，别人传入的参数不一定类型相同，会造成函数不可预期错误

1.2 求参数的和

1.2.1 在ES5中求参数的和

1.2.1 在ES6中求参数的和

传入不定数量的参数时候都会被放在arg这个数组里面

传入不定数量的参数时都会被放在arg这个数组中
function fn1(...arg){
    console.log(arg);
}
fn1(1,2,3,4,5,6,7,8,9,10);

...arg 必须放在形参的最后
function fn1(fn,...arg){
    console.log(arg);
}

求和

function fn1(){
    var s=0;
    for(var i=0;i<arguments.length;i++){
        s+=arguments[i];
    return s;  
}
var sum=fn1(1,2,3,4,5);
console.log(sum);

参数个数

function fn1(a,b,c,d,e){
    console.log(arguments.length)
}
fn1(1,2,3,4,5,6,6,7,8,9,10)
console.log(fn1.length);

arguments.length  在函数内是当前的函数传入实参数

fn1.log   通过获取函数的length可以获得的函数的形参数量

function fn1(){
    console.log(arguments.callee);就是当前函数
    console.log(arguments.callee.name);就是当前的名字
    console.log(arguments.callee.caller);调用当前函数的上下文函数
 }


 function fn2(){
     fn1();
 }
 fn2;   如果在fn2中调用fn1,那么caller为fn2
 fn1;   如果在fn1中调用fn1，那么caller为null

1.3 回调

1.4 匿名函数传给fn

function fn1(fn){
    fn();
}
fn1(function(){

})
把匿名函数传给fn,执行fn就是执行函数，相当于把a赋值给i

匿名函数的递归
function fn1(fn){
    fn(0);
}

fn1(function(a){
    a++;
    console.log(a);
    if(a>3) return;
    arguments.callee(a);
})

function fn1(fn){
    for(var i=0;i<10;i++){
        fn(i);
    }
}
fn1(function(a){
    console.log(a);
})
结果是：0 1 2 3 4 5 6 7 8 9

二、return

遇到return时，跳出函数，不再执行return后面的语句
```bash
        function fn1(){
            var a=1;
            return;
            console.log(a);
        }

        fn1();

使用return返回一个运行结果，或者一个值，仅仅返回一个
返回的结果可以在函数执行时候赋值给变量

function fn1(){
    var a=1;
    var b=2;
    return a*b;
}
var s=fn1();
console.log(s);

限定函数传入参数类型或者其值的范围，来判断继续执行还是跳出执行(减少错误，更有效运行)

function fn1(a){
    if(!a) return;
    var s=a+1;
    console.log(s);
}
fn(4);

实现多分枝条件支出——数值转中文

var arr=["零","一","二","三","四","五","六","七","八","九","十"]
        function getChineseNumber(n){
            if(n>=1000) return ;
            if(n<11) return arr[n];
            if(n<20) return "十"+arr[n%10]; 
            if(n%10===0 && n<100) return arr[n/10]+"十";
            if(n<100)  return arr[parseInt(n/10)]+"十"+arr[n%10]; 
            if(n%100===0) return arr[n/100]+"百";
            if(n%10===0) return arr[parseInt(n/100)]+"百"+arr[parseInt(n/10)%10]+"十";
            if(parseInt(n/10)%10===0) return arr[parseInt(n/100)]+"百零"+arr[n%10];
            return arr[parseInt(n/100)]+"百"+arr[parseInt(n/10)%10]+"十"+arr[n%10];
        }
            var str=getChineseNumber(555);
            console.log(str);

算数运算

       function getSum(arg,type){
           var s=arg[0];
           for(var i=1;i<arg.length;i++){
               switch(type){
                    case "+":
                    s+=arg[i];
                    break;
                    case "-":
                    s-=arg[i];
                    break;
                    case "*":
                    s*=arg[i];
                    break;
                    case "/":
                    s/=arg[i];
                    break;
               }
           }
           return s;
       }
    var s=getSum([1,44,3],"-");
       console.log(s);

break跳出循环，执行函数中循环后的语句
return跳出函数，直接从函数中跳出函数

function fn1(){
    var s=0;
    for(var i=0;i<10;i++){
    s+=i;
    if(i===7)
    return s;
    }
    console.log("aaaaaaa");
}
var s=fn1();
console.log(s);

var o;
function fn1(){
    return o ||(o={});
}
    var a=fn1();
    var b=fn1();
    console.log(a==b);

方格小游戏

    <style>
        #div1{
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            left:0;
            top:0;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <script>
    var bool=false;
        var x=0;
        var div1=document.getElementById("div1");
        div1.onclick=function(){
            bool=!bool;
        }

        setInterval(function(){
            if(!bool) return;
            x++;
            div1.style.left=x+"px";
        },2);
    </script>

设计模式——创建型模式

工厂模式

function fn1(name,age,sex){
            return {
                name:name,
                age:age,
                sex:sex
            }
        }

对象的属性名如果和值的变量名相同，可以直接带入

function fn1(name,age,sex){
            return {name,age,sex};
        }

        var o=fn1("谢天",30,"男");
        var o1=fn1("张慧",20,"女");
        console.log(o,o1);
```bash
返回多个数据
```bash
function fn1(a,b){
            a++;
            b*=2;
            return [a,b];
        }

        function fn1(a,b){
            a++;
            b*=2;
            return {a,b};
        }

       var o=fn1(3,5);
       console.log(o);

闭包

function fn1(a){
            return function(b){
                console.log("aaaa");
            }
        }

        var f=fn1();
        f();

        fn1(3)(4);

返回函数运行的结果

function fn1(a){
                a++;
              return fn2(a);
            }

            function fn2(a){
                a*=2;
               return fn3(a);
            }

            function fn3(a){
                a+=10;
                return a;
            }

            var s=fn1(5);
            console.log(s);

function fn1(a){
                a++;
              return fn2(a)+fn3(a);
            }

            function fn2(a){
                a*=2;
               return a;
            }

            function fn3(a){
                a+=10;
                return a;
            }

            var s=fn1(5);
            console.log(s);

返回回调函数返回的值

function fn1(a,fn){
                a++;
              return fn(a);
            }

            var s=fn1(5,function(n){
                return n*2;
            });
            console.log(s);

对象中的函数
写在对象属性中的this是指向当前所在的上下文环境中this指向,写在对象方法中的this一般指向当前对象.

var a=10;
            var obj={
                a:1,
                c:this.a,
                b:function(){
                    // console.log(obj.a);
                    console.log(this.a);
                }
            }

            var o=obj;
            obj={c:10};

            o.b();
            console.log(o);

通过return this，来让对象中的方法可以实现连缀

var obj={
                a:1,
                run:function(){
                    console.log("run");
                    return this;
                },
                play:function(){
                    console.log("play");
                    return this;
                }
            }
            
            obj.run();
            obj.play();

            obj.run().play();
            obj.play().run();

function fn1(a,b,fn){
            return fn(a,b);
        }

        function fn2(a,b){
            return a+b;
        }
        function fn3(a,b){
            return a-b;
        }
        function fn4(a,b){
            return a*b;
        }
        function fn5(a,b){
            return a/b;
        }
        
      var s=fn1(3,5,fn5);
      console.log(s);

三、回调函数

• 将一个函数以参数的形式传入到另一个函数中并且被调用执行，目的就是不关注要执行谁，执行就行了。
• ids=setInterval(回调函数,间隔时间,参数1,参数2…)
• ids就是这个时间间隔 标识id，可以通过clearInterval(ids)解除当前时间间隔设定
• 回调函数会被在间隔时间达到时调用，参数1，参数2就是向回调函数传参的方式
• 时间间隔如果设置为0或者不设置，则默认为1毫秒后

瞬间执行完的循环是同步的，
而延迟执行的是异步的，
在异步执行时，同步时的变量可能早就变化了

var ids;
        for(var i=0;i<10;i++){

            ids=setInterval(function(a,n){
                console.log(n);
            },1000,ids,i)
        }

延迟1000毫秒后执行这个回调函数，只执行一次

var ids=setTimeout(function(){
                clearTimeout(ids);
            },1000,10)

function fn1(fn){
            fn();
        }   
        
        function fn2(){
            console.log("aaa");
        }
        function fn3(){
            console.log("bbb");
        }

        fn1(fn2);
        fn1(fn3);

用setTimeOut重构setInterval

function setInterval_1(fn,time){
           setTimeout(function(n){
                fn(n);
                setInterval_1(fn,time,n);
            },time,arguments[2]);

        }
        setInterval_1(function(n){
            console.log(n);
        },1000,5)

通过插入不同的函数，解决不同的问题

异步回调——红绿灯案例

function redColor(fn1,fn2){
          var ids=setTimeout(function(){
                console.log("红色")
                clearTimeout(ids);
                fn1(fn2,redColor);
            },2000);
        }

        function yellowColor(fn1,fn2){
            var ids=setTimeout(function(){
                console.log("黄色")
                clearTimeout(ids);
                fn1(fn2,yellowColor);
            },2000);
        }

        function greenColor(fn1,fn2){
            var ids=setTimeout(function(){
                console.log("绿色")
                clearTimeout(ids);
                fn1(fn2,greenColor);
            },2000);
        }

        redColor(yellowColor,greenColor);

回调循环

function fn1(fn,n){
    if(n===undefined) n=0;
    n++;
    return fn(fn1,n);
}
function fn2(fn,n){
    n++;
    if(n===10) return n;
    return fn(fn2,n);
}
var s=fn1(fn2);
console.log(s);