• 闭包


    1.什么是闭包?
    函数嵌套函数,内部函数可以引用外部函数的参数和变量,参数和变量不会被垃圾机制所收回

    a和b 都不会被垃圾机制所收回

    test1:
    function aa(){
    var a=5;
    function bb(){
    alert(a); //5
    }
    return bb;
    }
    var c = aa(); //aa函数已经执行完,c 代表bb变量并没有被收回
    c();

    2.闭包有什么好处?
    希望变量长期驻扎在内存中
    避免全局变量的污染
    私有成员的存在

    test1:
    var a = 1;
    function aa(){
    a++;
    alert(a);
    }
    aa(); //2
    aa(); //3


    test2:
    function aa(){
    var a = 1;
    a++;
    alert(a)
    }
    aa(); //2
    aa(); //2

    test3闭包:
    function aa(){
    var a = 1;
    return function(){
    a++;
    alert(a);
    }
    }
    var b = aa();
    b(); //2
    b(); //3
    alert(a) //错误


    test4:
    var aa=(function(){
    var a = 1;
    return function(){
    a++;
    alert(a);
    }
    })();

    aa();
    aa();

    3.用法
    模块化代码,减少前端的污染,把内部函数变成私有的
    再循环中直接找到对应元素的索引

    test1:模块化代码
    var aa=(function(){
    var a = 1;
    function bb(){
    a++;
    alert(a);
    }
    function cc(){
    a++;
    alert(a);
    }
    return {
    b : bb,
    c : cc
    }
    })();
    aa.b(); //2
    aa.c(); //3

    test2:

    for(var i=0; i<oli.length; i++){

    oli[i].onclick = function(){
    alert(i); //3
    }
    }

    利用闭包改写,把循环中的i当做参数传进来
    for(var i=0; i<oli.length; i++){
    (function(i){
    oli[i].onclick = function(){
    alert(i);
    }
    })(i);
    }

    for(var i=0; i<oli.length; i++){

    oli[i].onclick = (function(i){
    return function(){
    alert(i)
    }
    })(i);
    }

    4.需要注意的地方
    在IE 下可能会引发内存泄露

    test1:
    window.onload = function(){
    var oDiv = document.getElementById('div1');
    oDiv.onclick = function(){
    alert(oDiv.id);
    }

    window.onunload = function(){ //解决内存泄露
    oDiv.onclick = null;
    }
    }

    test2:
    window.onload = function(){
    var oDiv = document.getElementById('div1');
    var id = oDiv.id;
    oDiv.onclick = function(){
    alert(id);
    }

    oDiv = null; //解决内存泄露

    }

  • 相关阅读:
    vue+element-ui中的表单验证(电话等等)
    什么是 RegExp?
    C中的指针和字符串
    getchar与scanf区别
    回显程序
    Python基础之容器1----字符串和列表
    Python基础之语句2
    Python基础之语句1
    Python基础之数据基本运算
    python初识
  • 原文地址:https://www.cnblogs.com/vivijs/p/4447427.html
Copyright © 2020-2023  润新知