web.jpeg

闭包

• 闭包是一种特殊的函数。

生一个闭包

当一个内部函数引用了外部函数的数据(变量/函数)时, 那么内部的函数就是闭包
所以只要满足"是函数嵌套"、"内部函数引用外部函数数据"
比如:一个函数A访问另外一个函数B的数据

闭包的作用

• 可以间接访问封闭空间私有数据
• 获取数据只能通过指定的接口
• 在设置数据的时候可以进行校验处理
• 延长变量的生命周期

注意: 当后续不需要使用闭包时候, 一定要手动将闭包设置为null, 否则会出现内存泄漏

function fn(){
    var a =10;
    return function(){
        a++; 
        return  console.log(a);
        
    };
}

//访问 局部变量 
var f = fn();
f();
f();
// 如果 return a ; 就是延长局部变量的声明周期

• 通过指定的方法获取数据 和 对数据的处理
  • getName获取数据
  • setName设置处理数据

function demo (){
        var name = "cc";
        var age = 18;

        return function(){

            return {
                getName:function(){

                    return name;
                },
                setName:function(newName){
                    if(newName){
                        name = newName;
                    }

                    return name;
                },
                getAge:function(){
                    return age;
                },
                setAge:function(newAge){
                    if(newAge < 0){
                        newAge = 0;
                    }
                    
                    return (age = newAge);
                }
            }
        }
    }

惰性函数

 //惰性函数: 做一次性初始化的操作
    function foo(){
        //初始化操作
        console.log("foo");
        //更新函数的执行内容，更新函数体
        foo = function(){
            console.log("oo-foo");
            
        }
        
    }

    foo();
    foo();

立即执行函数

• 通用格式:()();
• 作用:将局部变量转化为全局变量

 (function(window){
        var name_cc = "测试";

        window.name_cc = name_cc;
        console.log(window);
        
    })(window);
    
    console.log(name_cc);

不同形式的立即执行函数

   //匿名函数
    +function(){
        console.log("1");
        
    }();

//匿名函数
    -function(){
        console.log("2");
    }();


 //匿名函数
    !function(){
        console.log("3");
    }();

函数节流

• 函数节流就是控制这个函数执行的次数频率
• 减少代码执行次数, 提升网页性能

 let timer = null;
     let flag = true;

    window.onresize = function () {

        if (!flag){
            return
        };
        flag = false;
        timer&&clearTimeout(timer);
        timer = setTimeout(function () {
            flag = true;
            resetSize();
            console.log("函数节流---")
        },200);
    };

当浏览器的尺寸发生变化的时候，就只执行 window.onresize 函数，在执行的时候 flag = true 而!falg为flase,随着浏览器尺寸不断的变化，window.onresize 调用的频率就会增加，当到 200毫秒时就执行一次setTimeout的函数

//函数节流的封装
    
    function throttle(callBack,delay) {
            let timer =  null;
            let flag = true;
        return function () {
            //判断
            if (!flag) return;
            flag = false;
            let self =  this;
            let args = arguments;
            timer && clearTimeout(timer);
            timer = setTimeout(function () {
                flag = true;
                callBack.apply(self,args);

            },delay || 500);

        }
    }

函数防抖

• 函数防抖是优化高频率执行js代码的一种手段
• 可以让被调用的函数在一次连续的高频操作过程中只被调用一次
• 作用: 减少代码执行次数, 提升网页性能
• oninput 输入时触发/ onmousemove 鼠标移动触发 / onscroll 页面滚动时触发 / onresize 页面缩放时触发 等事件

  //函数防抖的封装
    //注意: 1.函数的会点
    //2.this的指向
    //3.原来的的事件对象

function debounce(callBack,delay) {
        let timer = null;
        return function () {
            let self = this;
            //伪数组
            let args = arguments;
            timer&& clearTimeout(timer);
            timer = setTimeout(function () {
                if (callBack){
                    //借用函数
                    callBack.apply(self,args);
                };

            },delay||300);
        }

    }

    input.oninput = debounce(function () {
        console.log(this);
        console.log(arguments);
    },200);

函数节流和函数防抖区别

• 函数节流是减少连续的高频操作函数执行次数 (例如连续调用10次, 可能只执行3-4次)
• 函数防抖是让连续的高频操作时函数只执行一次(例如连续调用10次, 但是只会执行1次)