zoukankan      html  css  js  c++  java
  • JavaScript Closure 理解闭包的几个关键点

     参考: http://www.runoob.com/js/js-function-closures.html

    http://kb.cnblogs.com/page/110782/

    闭包的几个关键点:

    1) 理解JavaScript变量作用域: 全局变量和局部变量

    2) 代码结构: 外部function定义内部function, 内部function作为外部function的返回值

    3) 内部function可以访问外部function的局部变量; 外部function的局部变量将一直存在于内存中

    为什么使用闭包时外部函数的局部变量将一直存在于内存中?

    因为外部function返回内部function的引用,并且这个引用又引用了外部function的局部变量,所以外部function的局部变量将一直存在内存中

    计数器的困境:

    设想下如果你想统计一些数值,且该计数器在所有函数中都是可用的。

    你可以使用全局变量,函数设置计数器递增:

    var counter = 0;
    
    function add() {
        counter += 1;
    }
    
    add();
    add();
    add();
    
    // 计数器现在为 3
    

    计数器数值在执行 add() 函数时发生变化。

    但问题来了,页面上的任何脚本都能改变计数器,即便没有调用 add() 函数。

    如果我在函数内声明计数器,如果没有调用函数将无法修改计数器的值:

    function add() {
        var counter = 0;
        counter += 1;
    }
    
    add();
    add();
    add();
    
    // 本意是想输出 3, 但事与愿违,输出的都是 1 !
    

    使用闭包解决计数器问题:

    var func = function () {
        var counter = 0;
        return function () {return counter += 1;}
    }
    
    var add = func();
    
    add();
    add();
    add();
    
    // 计数器为 3
    

    或函数自我调用

    var add = (function () {
        var counter = 0;
        return function () {return counter += 1;}
    })();
    
    add();
    add();
    add();
    
    // 计数器为 3
    

      

     

  • 相关阅读:
    常用英语1000句
    TXT EXPLORER
    窗体美化
    C++ Code_StatusBar
    C++ Code_Slider
    C++ Code_ScrollBar
    C++ Code_ImageList
    C++ Code_HotKey
    C++ Code_animateCtrl
    C++ CheckMenuItem
  • 原文地址:https://www.cnblogs.com/bebass/p/6370496.html
Copyright © 2011-2022 走看看