您的位置：首页 > Web前端 > JavaScript

javascript闭包

2016-05-16 16:12 323 查看

JavaScript垃圾回收机制：JavaScript不需要手动地释放内存，它使用一种自动垃圾回收机制（garbage collection）。当一个对象无用的时候，即程序中无变量引用这个对象时，就会从内存中释放掉这个变量。

在JavaScript中，我们声明的JavaScript全局对象、全局函数以及全局变量均自动成为window对象的成员。
全局变量是window对象的属性。
全局函数是window对象的方法。

一、变量的作用域

要理解闭包，首先必须理解Javascript特殊的变量作用域。　　在JavaScript中，变量的作用域分两种：全局变量和局部变量。　　在Javascript中，在函数内部可以直接读取全局变量。但是反过来则不行，在函数外部无法读取函数内的局部变量。(函数内部声明变量的时候，一定要使用var命令。如果不用的话，实际上是声明了一个全局变量！)

二、闭包

各种专业文献上的"闭包"（closure）定义非常抽象，比如有这样的一个闭包定义："JavaScript闭包就是在另一个作用域中保存了一份它从上一级函数或者作用域得到的变量，而这些变量是不会随上一级函数的执行完成而销毁"，对于这样的闭包定义，我是很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
总结就是：1、函数b嵌套在函数a内部；
2、函数a返回函数b。   function f1(){
　　　　var n=999;
        //nAdd是一个没有使用var声明的全局变量，这个变量现在指向了在f1函数内部声明的一个匿名函数（“=”右边的函数就是一个匿名函数，创造完毕函数后，又将该函数赋给了变量nAdd）
　　　　nAdd=function(){n+=1}
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}

　　var result=f1();//result就是f2函数
　　result();//第一次调用result函数 999
　　nAdd();//nAdd代表的就是在f1函数内部声明的一个匿名函数，nAdd()就是在调用匿名函数
　　result();//第二次调用result函数 1000
闭包的作用：（1）读取函数内部的变量（2）让这些变量的值始终保持在内存中
在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
　　为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
　　这段代码中另一个值得注意的地方，就是"nAdd=function(){n+=1}"这一行，首先在nAdd前面没有使用var关键字，因此 nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。

匿名函数（anonymous function）：就是没有函数名的函数。

三、使用闭包的注意点
1）闭包允许内层函数引用父函数中的变量，但是该变量是最终值。

例：/**
* <body>
* <ul>
*     <li>one</li>
*     <li>two</li>
*     <li>three</li>
*     <li>one</li>
* </ul>
*/

var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
    lists[ i ].onmouseover = function(){
        alert(i);
    };
}
你会发现当鼠标移过每一个<li&rt;元素时，总是弹出4，而不是我们期待的元素下标。这是为什么呢？注意事项里已经讲了（最终值）。显然这种解释过于简单，当mouseover事件调用监听函数时，首先在匿名函数（ function(){ alert(i); }）内部查找是否定义了 i，结果是没有定义；因此它会向上查找，查找结果是已经定义了，并且i的值是4（循环后的i值）；所以，最终每次弹出的都是4。
解决方法一：
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
    (function(index){
        lists[ index ].onmouseover = function(){
            alert(index);
        };
    })(i);
}
解决方法二：
function eventListener(list, index){
    list.onmouseover = function(){
        alert(index);
    };
}
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){
    eventListener(lists[ i ] , i);
}

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

四、例子
1）var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()()); //My Object

前面说了this指向全局对象Window，为什么会输出My Object？

var name = "The Window";//全局变量name
    //全局对象object
    var object = {
　　　　name : "My Object",

　　　　getNameFunc : function(){
            /*
            此时这个this代表的是哪个对象呢，this此时代表的是object对象，哪个对象调用this所在的函数，this指的就是哪个对象
            执行完that = this后，此时that也代表object对象
            */
            var that = this;//that是在getNameFunc函数里面声明的一个局部变量
            //证明getNameFunc函数里面的this代表的是object对象而不是window
            alert("this==object的结果是："+(this==object));
            alert("this==window的结果是："+(this==window));
            //证明that代表的是object对象
            alert("that==object的结果是："+(that==object));
　　　　　　return function(){
            /*that是在getNameFunc函数里面声明的一个局部变量,
            正常情况下getNameFunc函数调用完成后，that这个局部变量就会被JavaScript的GC回收，释放掉that这个局部变量所占用的内存空间，
            但是现在that却能一直正常使用，没有被回收，
            原因就在于getNameFunc是这个匿名函数的父函数，而getNameFunc函数调用完后会将这个匿名函数返回并被赋给了一个全局变量retFn，这导致匿名函数始终在内存中，
            而匿名函数的存在依赖于getNameFunc函数，因此getNameFunc函数也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
            既然getNameFunc函数始终在内存中，那么在getNameFunc函数内部声明的that局部变量在内存中也会一直存在，既然存在，那么当然可以继续使用了。
            */
　　　　　　　　return that.name;//that代表的是object对象，那么that.name访问的自然就是object对象的名字"My Object"
　　　　　　};

　　　　}

　　};
    var retFn = object.getNameFunc();//调用完getNameFunc方法后，返回一个匿名方法，此时retFn代表的就是匿名方法，现在相当于给匿名方法起了一个名字叫retFn
　　alert(retFn());

2）<script type="text/javascript">
    function A(){
        var i = 0;//声明在A函数内部的局部变量i
        //声明在A函数的内部的子函数b
        function b(){
            alert("i = "+(++i));//在子函数b内部访问声明在A函数内部的局部变量i
        }
        return b;//返回b这个函数的地址
    }
    /*
    在执行完var c = A()后，变量c实际上是指向了函数b,b中用到了变量i,
    再执行c()后会弹出一个窗口显示i的值(第一次为1)，
    这段代码其实就是创建了一个闭包，
    因为函数a外的变量c引用了函数a内部的函数b
    也就是说：当函数a的内部函数b被函数a外的一个变量引用的时候，
    就创建了一个所谓的"闭包"
    闭包的作用就是在a执行完并返回后，
    闭包使得JavaScript的垃圾回收机制GC不会收回a所占用的资源，
    因为a的内部函数b的执行需要依赖a中的变量
    */
    A();//此时内存中肯定会有i的空间，当执行完A()之后，GC就会回收为i分配的内存空间
    var c = A();//这种用法，GC不会把i当成垃圾处理掉
    c();//相当于调用b()，结果是：i=1
    c();//结果是：i=2
    c();//结果是：i=3
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航