闭包!!

一,闭包

闭包的概念:
工作中所有的函数都是闭包,一般来说嵌套的函数产生的闭包更为强大,也是大部分时候我们所说的闭包。
什么是闭包:``
闭包是指函数外能访问到函数作用域的变量(局部变量)的函数。
闭包的作用:
一,可以读取函数内部的变量(局部变量)
二,让这些变量的值始终保持在内存中。
三,增加块级作用域
闭包的注意事项(弊端)
闭包会使函数的变量始终保存在内寸中,内存消耗很大,所以不能滥用闭包,会造成网页的性能问题。在ie中可能会导致内存泄漏。

闭包的基本代码

<script>
    // 要想外面能够访问fn1函数的n,首先让fn2处于fn1内部,在将整个fn2 return出去。
    // 在外面调用这个函数,n就在函数内部了
    function fn1(){
    
    
        var n = 100;
        // 下面这句话是定义函数,而不是调用
        let fn2 = function(){
    
    
            console.log("fn2",n);//
        }
        return fn2;//把fn2返回出去。
    }

    let f  = fn1();
    f();

    //  或是  fn1()();

</script>

闭包中修改局部变量

<script>
    function fn1(){
    
    
        var n = 100;  //在内存中申请空间,名字n,值是100;
        // 下面这段代码是定义函数,不是调用
        let fn2 = function(){
    
     //在内存中申请空间,名字fn2,值是函数        
            n++;
            console.log("fn2",n);
        }
        return fn2;
    }

    let f = fn1();

    f();//101  
    f();//102 只执行调用fn2,没有执行26行代码,所以n 为101 调用结果为102
    f();//103

</script>

闭包中两个子函数 代码

<script>
    function fn1(){
    
    
        var n = 100;  //在内存中申请空间,名字n,值是100;
        // 下面这段代码是定义函数,不是调用
        let fn2 = function(){
    
     //在内存中申请空间,名字fn2,值是函数            
            n++;
            console.log("fn2",n);
        }
        
        let fn3 = function(){
    
     //在内存中申请空间,名字fn2,值是函数            
            n++;
            console.log("fn2",n);
        }
        
        return [fn2,fn3];
    }    

    let arr = fn1();
    arr[0]();
    arr[1]();

</script>

闭包示例

<script>
   function test1(){
    
    
	var arr = [];

	for(var i=0; i<5; i++){
    
     
        //赋值;(定义函数)
		arr[i] = function(){
    
    
            return i; 
        }
	}

    console.log("i",i);

	return arr;
}
  //因为用的是var  当点用数组这个函数是i已经是5了。 let就不同了。let有暂时死去特性,会每次保存i的值
    var arr = test1();
    // console.log(arr[0]);  值为5
    console.log(arr[0]());//值为5
    console.log(arr[1]());//值为5
    console.log(arr[2]());//值为5

</script>

用循环方式给节点集合绑定点击事件

<script>
    // window.onload:当前窗口里的文档加载完毕之后,调用函数
    window.onload = function(){
    
    
        let inputs = document.getElementsByTagName("input"); //inputs 是nodeList类型(dom节点的集合)

        for(var i=0;i<inputs.length;i++){
    
    
            // inputs[i].index = i;//给dom元素增加一个自定义属性
            inputs[i].setAttribute("index",i);
            inputs[i].onclick = function(){
    
    
                // console.log(i);//
                console.log(this.getAttribute("index"));
            }
        }
    }

</script>

九九乘法表

<script>
function outerFunc(){
    
    
   for(var i=1;i<=9;i++){
    
    

        (function(maxCount){
    
    
            for(var j=1;j<=maxCount;j++){
    
    			
                document.write(j+"*"+maxCount+"="+maxCount*j+"&nbsp;&nbsp;")
            }
        })(i);

        document.write("<br>");

    }
}

outerFunc();

</script>

对某些数据的修改,只想限定在某个函数里,而不是任何地方都可以修改

<script>
// 对某些数据的修改,只想限定在某个函数里,而不是任何地方都可以修改

    function fn1(){
    
    
        let count = 10;
        function add(){
    
    
            count++;
        }
        return add;
    }

    let f = fn1();

    f();
    f();
    
</script>

猜你喜欢

转载自blog.csdn.net/m0_54625720/article/details/112707061