JS闭包

Veröffentlicht am   |  

这么专业的术语，真是不懂，没事，有我在！！！

名词解释：

  • JS垃圾回收机制：找出不再使用的变量，释放其占用的内存。
  • 变量生命周期：全局变量直至浏览器卸载页面才会结束；局部变量，函数执行结束才会结束。
  • 全局变量污染：上面我定义一个aa的函数 ，比人也定义一个aa的函数，那么我的aa的函数就会被覆盖掉。

一、JS中的垃圾回收机制

1.举个例子：

function aa(){
     var a=1;
}
aa();
  • 解析：a为局部变量，当函数结束后，该变量就会被释放，不存在。
  • 变量生命周期：全局变量直至浏览器卸载页面才会结束；局部变量，函数执行结束才会结束。

二、全局变量污染

1.举个例子：
        

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

function aa(){
    a--;
    alert(a);
}
aa();
aa();
  • 解析：全局变量污染就是同名函数覆盖掉之前定义的函数。
  • 所以运行结果就是函数被调用四次，结果为0，-1，-2，-3。
  • 要避免使用全局变量。

三、什么是闭包？

1.必备条件：
  1. 函数嵌套函数。
  2. 内部函数可以引用外部函数的参数或者变量。
  3. 参数和变量不会被垃圾回收机制收回。
2.闭包的形式一：

function aa(a){
        var b=5;
        function bb(){
            alert(a); //50
            alert(b); //5
        }
        bb();
    }
    aa(50);
3.闭包的形式二：

function aa(a){
        var b=5;//变量没有被收回
        function bb(){
            alert(a); //5
        }
        return bb;
    }
var c=aa();
c();

四、闭包的好处？

  1. 希望一个变量长期驻扎在内存中
  2. 避免全局变量的污染
  3. 私有成员的存在
1.使用局部变量对函数结果进行累加：
  • 出现问题：两次运行结果一样

function aa(){
        var a=1;
        a++;
        alert(a);
    }
    aa(); //2
    aa(); //2
  • 解决方案：闭包

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

五、函数表达式与代码模块化模型

参考一：

function aa(){
    alert(1);
}
aa();
改写参考一：

(function (){
    alert(1);
})() 
//这就变成了函数表达式，后面可以直接调用。
//可以不用函数名字，以为调用的就是函数。
参考二：（模块化代码）

var aaa=(function(){
        var a=1;
        function bbb(){
            a++;
            alert(a);
        }
        function ccc(){
            a++;
            a++;
            alert(a);
        }
        return{
            g:bbb,
            o:ccc
        }
    })();
    aaa.g();//2
    aaa.o();//3
//return把两个函数的返回值给扔出去，面向对象的写法。

六、利用闭包在循环内部找到索引值

  • (html部分)：

<ul>
        <li>晗</li>
        <li>晗</li>
        <li>宝</li>
        <li>宝</li>
</ul>
  • (js部分写法一):

window.onload=function(){
    var ali=document.getElementsByTagName('li');
    for (var i = 0; i < ali.length; i++) {
        (function(i){            
        ali[i].onclick=function(){
            alert(i);
        }
    })(i);
}
  • (js部分写法二):

window.onload=function(){
    var ali=document.getElementsByTagName('li');
    for (var i = 0; i < ali.length; i++) {
        ali[i].onclick=(function(){
            return function(){
                alert(i);
            }
        })(i);    
    }
}

this is end~~