闭包 使用场景

一、闭包概念

闭包就是能够读取其他函数内部变量的函数。
或简单理解为定义在一个函数内部的函数，内部函数持有外部函数内变量的引用。

二、闭包作用

1、读取函数内部的变量
2、让这些变量的值始终保持在内存中。不会再f1调用后被自动清除。
3、方便调用上下文的局部变量。利于代码封装。

原因：f1是f2的父函数，f2被赋给了一个全局变量，f2始终存在内存中，f2的存在依赖f1，
因此f1也始终存在内存中，不会在调用结束后，被垃圾回收机制回收。

三、闭包缺点

1、由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能
问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2、闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作
它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要
随便改变父函数内部变量的值。

四、使用场景

1、setTimeout

原生的setTimeout传递的第一个函数不能带参数，通过闭包可以实现传参效果。

function f1(a) {
    return function f2() {
        console.log(a);
    }
}
var fun = f1(1);
setTimeout(fun,1000);//一秒之后打印出1

2、回调

定义行为，然后把它关联到某个用户事件上（点击或者按键）。代码通常会作为一个回调（事件触发时调用的函数）绑定到事件。

 function changeSize(size){//当点击数字时，字体也会变成相应的大小。
            return function(){
                document.body.style.fontSize = size + 'px';
            };
        }
        document.getElementById('size-12').onclick = changeSize(12);
        document.getElementById('size-20').onclick = changeSize(20);
        document.getElementById('size-30').onclick = changeSize(30);

通过回调出来的function（）绑定到点击事件上。

3、函数防抖

function debounce(fn,delay) {
    let timer = null;
    return  function() {
        if (timer) clearTimeout(timer); 
        timer = setTimeout(fn, delay);
    }
}

4、封装私有变量

创建一个计数器

function f1() {
    var sum = 0;
    var obj = {
       inc:function () {
           sum++;
           return sum;
       }
};
    return obj;
}
let result = f1();
console.log(result.inc());//1
console.log(result.inc());//2
console.log(result.inc());//3