闭包函数

1、闭包： 在外部函数内，定义一个内部函数，这个内部函数，会对外部函数中声明的变量进行操作，并在外部函数的外面，去调用这个内部函数，所形成的闭合回路 叫 闭包

当一个函数的返回值是一个函数

function fn(){
    return function (){ alert("拉拉") };
}
var res = fn();  //res = function (){ alert("拉拉") }
console.log(res);

function fn(){
    var count = 10; //父函数的局部变量 count
    function fnSon(){   //子函数
        count++;       //操作子函数局部变量
        alert(count);
    }
    fnSon();
    return fnSon
}
var res = fn();   //res = fnSon
res();  // 调用 11
res();  // 调用 12

2、闭包优点：

2-1 ：快速分割变量空间，防止变量名污染

2-2 ： 能够缓存局部变量数据，保证代码正常执行

3、闭包缺点：

3-1 ： 闭包形成后，会导致父函数的内存空间暂存，即使父函数调用完也不会 被销毁滥用、多用闭包会导致，内存空间被消耗，引起应用卡顿，严重的可导致 内存溢出

4、常见的闭包形式

主动编写的闭包

var fnn = null;
function fn(){
    var count = 100;
    fnn = function(){
        count++;
        alert(count);
    }
}
fn();
fnn();   //调用形成闭包  count = 101
fnn();   //调用形成闭包  count = 102

返回值：

function main(){
    var count = 100;
    return function(){
        count++;
        alert(count);
    }
}
var re = main();
re();    //101
re();    //102

5、ES6JS ：语句对象特性，当对象的值，只是一个变量表示，与key一致，那么可以省略值

var A = (function(){
    var a = 100;
    var b = 200;
    function fn1(){
        a++;
        alert(a);
    }
    
    function getA(){
        return a;
    }
    return {
        fn1,
        getA,
        a,
        b
    }
})()
console.log(A)
A,fn1();   //101
A,fn1();   //102
alert(A.a);    //100
alert(A,getA());   //102

6、封装工具方法库

var Utils = (function(){
    
    //1、封装随机数
    function randNum(min,max){
        return Math.floor(Math.random() * (max-min+1)+min);
    }
    
    //2、随机颜色
    function randColor(){
        var r = randNum(0.255);
        var g = randNum(0.255);
        var b = randNum(0.255);
        return `rgb(${r},${g},${b})`;
    }
    
    
    //3、基本运算
    function operate(num1,num2,callback){
        if(isNaN(num1 + num2)){
            alert("请输入正确的数字")
            return 0;
        }
        return callback(+num1 , +num2);
    }
    
    //4、秒转时间格式01：22：02
    function timeFormat(time){
        //获取时
        var hour = Math.floor(time / 3600);
        //获取分
        var min = Math.floor(time % 3600 /60);
        //获取秒
        var sec = Math.floor(time % 3600 % 60);
        //如果不足两位 < 10, 在前面补0
        hour = hour < 10 ? '0' + hour : hour;
        min  = min  < 10 ? '0' + min  : min ;
        sec  = sec  < 10 ? '0' + sec  : sec ;
        
        return `${hour} : ${min} : ${sec}`
    }
    
    
    //导出封装的工具方法
    return {
        randNum,randColor,
        operate,timeFormat
    }
          
})()

应用封装库

    //获取随机数
    var rand = Utils.randNum(2,10);
    alert(rand);

    // 获取随机颜色

    var color = Utils.randColor();
    alert(color);

    // 转换
    alert(Utils.timeFormat( 5000 ));

7、事件绑定的典型闭包形式

<button id='btn'>按钮</div>

function main(){
    var count = 100;
    var btn = doucument.getElementById('id');
    
    btn.onclick = function(){
        count++;
        alert(count)   //按按钮可连续增加
    }
}
main();

8、延时器的闭包形式

start();   //调用
function start(){
    var count = 100;
    setInterval(function(){
        console.log(++count);
    },1000)
}             //每隔一秒count增加1

9、 函数形参默认值：是指函数调用时，不传、或者少传参 时，函数的形参一般形况下会接收一个undefined，为实现不传参数时，形参拥有一个默认值，可以利用逻辑或表达式实现默 认值设置。

function fn(argu1,argu2){
    argu1 = argu2 || 默认值
}

10、可变参数数组：关键字 arguments

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

    alert(Math.max(1,3,6,34,67,99))

通过遍历arguments 可以实现动态参数函数的定义

11、函数的递归调用：是指在函数内部调用自身

var count = 0;
function fn(){
    count++;
    if(count > 10) return;
    fn();
}
fn();
console.log(count);   // 11