• 什么是闭包及使用闭包应该注意的地方


      对于新手来说,闭包的概念往往有些晦涩。书上的概念描写的非常简短,网上的各类文章又常常是长篇大论地探讨闭包的作用呀,影响呀,看到最后,觉得是越看越晕,越来越搞不懂什么是闭包了,所以在这里分享自己对闭包的浅显的理解,希望对新手有所帮助,相互交流。

    >>进入主题

      什么是闭包:闭包是指有权访问另一个函数作用域的变量的函数。--《javascript高级程序设计》

      书上的概念就这么一句话,其实闭包就是像这句话定义的一样简单。如果有一个函数fun2,它可以访问在其它函数如fun1中的局部变量,那么它(fun2)就是闭包。创建闭包的简单方式,就在在函数内部创建另一个函数,下面例子创建了个简单的闭包

    1 function fun1 () {
    2     var  a = 0;
    3     function fun2 () { 
    4         console.log(a); // 在这个函数fun2中可以访问另一个函数中的变量a,所以fun2()就是一个闭包。
    5     }
    6     fun2();
    7 }

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~定义分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

      以下是关于闭包的一些知识与注意事项:

      1.在定义函数外调用闭包的方法,逃离方式:

        (1).将内部函数指定给一个全局变量;

    var globalVar;
    function outer() {
        console.log('outer');
        function inner(){
            console.log('inner');
        }
        globalVar = inner;      
    }
    outer(); // outer
    globalVar(); // inner;

    在这个例子中inner()通过全局变量的引用成功逃离,现在可以在全局中调用,而且可以引用outer()的变量

        (2).通过返回值来'营救'内部函数的引用

    function outer() {
        console.log('outer');
        function inner(){
            console.log('inner');
        }
       return inner;      
    }
    var fn = outer(); // outer
    fn(); // inner;

    在这个例子中inner()通过返回值成功逃离,现在可以在全局中调用,而且可以引用outer()的变量

      2.在函数外调用闭包的影响:增加内存占用;

        本来正常的情况下是函数调用结束之后函数的执行环境离开环境栈,定义的变量废弃(废弃与垃圾收集机制有关),活动变量(变量对象)会被销毁,内存释放。但是现在因为闭包的作用域链包含了外部函数的变量对象,外部函数的变量有可能再被引用,垃圾收集机制不会将外部函数的变量废弃,在内存保留的外部函数的变量对象。这样就加大了对内存的占用。

      3.闭包与变量的关系:闭包中常见的误区及解决技巧

        闭包保存的是包含函数的整个变量对象,所取得的外部对象变量为闭包被调用时刻的对象变量,一般为外部函数变量的最后一个值。

    例:

     

    function createFun() {
        var result = [];
        for ( var i = 0; i < 10; i++) {
            result[i] = function() {
                return i;
            };
        }
        return result;
    }
    var result = createFun();
    console.log(result[5]()); // 10

      这里外部函数的返回值为一个数组,数组值为不同函数(闭包)的引用,我们会误认为每个闭包的调用的返回值不同,但实际上每个函数都会返回一样的值。因为当闭包调用时,调用闭包的外部函数已经执行完毕,此时外部函数的变量对象中的 i = 10,而我们闭包的返回值为i,闭包会获取调用时的外部变量对象,此时的i为10。

    解决:

    function createFun() {
        var result = [];
        for ( var i = 0; i < 10; i++) {
            result[i] = function(num) {
                return function() {
                       return num;
                };   
             }(i);
        }
        return result;
    }
    var result = createFun();
    console.log(result[5]()); // 5               

      在循环中,我们定义了一个匿名数组,并将立即执行该匿名函数的结果赋给数组,这里的匿名函数有一个参数num,每次将i作为参数传递给num,每次循环num都会得到不同的值,所以每次返回了不同的函数(区别在于num值不同),当在外部调用数组值时,会返回不同的值,与预期相符。 

      4. 注意闭包中this值

      首先,关于函数中this指向,我们应该知道this指向调用该函数的对象,若无明确调用对象则指向window对象。

      在闭包中容易弄错的this指向,例:

    var    name = "window";
        var o = {
            name: "object",
            getName: function() {
                return function() {
                    return this.name;
                };
            }
        };
    console.log(o.getName()()); // window

      可以看出闭包this指向了全局对象,分析,可以把o.getName()()写成(o.getName())(),这个表达式相当于第一步先执行了o.getName(),这个函数返回了一个匿名函数(闭包),然后在全局下执行了这个闭包,并不是通过对象o调用,所以this指向全局对象。

      5. 内存泄漏的问题,如何减少不必要的内存占用

    function assignHandler() {
            var ele = documnet.getElementById("somenode");
            ele.onclick = function() {
                console.log(ele.id);
            };
    } 

      在上面的例子中定义ele的方法与匿名函数有关,于是ele保存了对匿名函数的引用,而闭包会引用包含函数也引用了ele对象,这样就造成了对象的循环引用,ele元素(dom元素占用内存较大)就一直保存在了内存中无法释放,解决方法如下:

      

    function assignHandler() {
            var ele = documnet.getElementById("somenode");
            var id = ele.id;     
            ele.onclick = function() {
                console.log(id);    // 通过id值中介表面上解除了与ele的循环引用
            };
            ele = null; // 手动解除引用
    } 

      因为闭包会引用包含函数的整个变量对象,所以用id值只能表面上解除循环引用,需要进一步手动设置元素为null才能真正减少引用,释放内存。

      以上大多为使用闭包应该注意的事项,当然使用闭包也有很多优点,如:使用匿名函数模仿块级作用域,定义访问私有变量的特权方法,避免全局变量污染等,大家可以自行研究。

      

  • 相关阅读:
    Flex 学习笔记 Remoting中的作用域(转)
    Flex 学习笔记 动态设置itemRenderer
    发现一个很好玩的网站个人漫画
    AjaxLoad动态生成加载图标的网站
    如何提高大字符串(是从文本文件读取出来的,有2M多)在网页中的显示速度
    CSS纵向居中问题
    用javascript进行xsl转换
    实现鼠标感应效果
    随笔写写
    execCommand指令集
  • 原文地址:https://www.cnblogs.com/formercoding/p/5884735.html
Copyright © 2020-2023  润新知