zoukankan      html  css  js  c++  java
  • Javascript中闭包(Closure)的探索(一)基本概念

    由于我是做web开发的,在项目中经常使用javascript。对js的闭包特性早有耳闻,趁着不是很忙自己研究了一下。

    通过从网络上的查找,了解到javascript的闭包特性,总结了一下,不足之处希望大家不吝指教!

    1.Closure的基本概念(摘抄如下):

    “闭包”是一个表达式(一般是函数),它具有自由变量以及绑定这些变量的环境(该环境“封闭了”这个表达式)。

    闭包,就是封闭了外部函数作用域中变量的内部函数。但是,如果外部函数不返回这个内部函数,闭包的特性无法显现。

    如果外部函数返回这个内部函数,那么返回的内部函数就成了名副其实的闭包。此时,闭包封闭的外部变量就是自由变量,而由于该自由变量存在,外部函数即便返回,其占用的内存也得不到释放。

    2.以一个小问题为例解释一下闭包的特性:

    要求:给页面上的一系列按钮绑定带有不同参数的函数。

    代码(为说明问题简化了代码):

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>JsClosure</title>
    <script type="text/javascript">
    function initBtnClick() {
    for (var i = 1; i < 6; i++) {
    var btn = document.getElementById("button" + i);
    btn.onclick
    = function() {
    alert(i);
    };
    }
    }


    </script>
    </head>
    <body>
    <input type="button" value="closureTest" onclick="initBtnClick()" />
    <input type="button" value="button1" id="button1" />
    <input type="button" value="button2" id="button2" />
    <input type="button" value="button3" id="button3" />
    <input type="button" value="button4" id="button4" />
    <input type="button" value="button5" id="button5" />
    </body>
    </html>
     

    现象:首先点击“closureTest”按钮给其他按钮绑定事件,然后点击其他五个按钮发现alert出来的值全是6。与预期的1,2,3,4,5相差甚远!

    按闭包的定义分析现象:在给按钮绑定事件时使用的匿名函数(即封闭了外部函数作用域中变量的内部函数),但是由于外部函数initBtnClick没有返回此匿名函数,所以闭包没有起作用(即如果外部函数不返回这个内部函数,闭包的特性无法显现)。匿名函数封闭的外部变量(即i)没有成为自由变量,内存被释放,最终只保留了循环的最后一个值6。

    根据分析改进initBtnClick函数,使其形成一个真正的闭包:

    function initBtnClick() {
    for (var i = 1; i < 6; i++) {
    var btn = document.getElementById("button" + i);
    btn.onclick
    = function(j) {
    return function() {
    alert(j);
    }
    } (i);
    }
    }

    再次点击“closureTest”按钮给其他按钮绑定事件,然后点击其他五个按钮发现依次alert1,2,3,4,5。与预期的结果相同。

    现象分析:通过执行外部的匿名函数(function(j))返回内部的匿名函数function(){alert(j);}形成真正的闭包(即如果外部函数返回这个内部函数,那么返回的内部函数就成了名副其实的闭包)。匿名函数(function(j))传入的参数i就成了自由变量,内存不会被释放(即闭包封闭的外部变量就是自由变量,而由于该自由变量存在,外部函数即便返回,其占用的内存也得不到释放)。

    改进后的代码如下,为了清晰一些将内部匿名函数封装了一下:

    function displayNum(inputNum) {
    return function() {
    alert(inputNum);
    };
    }

    function initBtnClick() {
    for (var i = 1; i < 6; i++) {
    var btn = document.getElementById("button" + i);
    btn.onclick
    = displayNum(i);
    }
    }

    本例只是简单的介绍了一下js的闭包,只是希望大家能对闭包有个直观点的了解。

  • 相关阅读:
    Spring中的@Valid 和 @Validated注解你用对了吗
    linux 安装php_fileinfo扩展
    长链接,案例
    小程序,if 语句嵌入控制class 内容
    脚本执行,log 换行符号 PHP_EOL
    查看ip,某端口是否开启
    Out-of-core classification of text documents of sklearn
    Working With Text Data of sklearn
    docstring of python
    Manifold learning of sklearn
  • 原文地址:https://www.cnblogs.com/wang_yb/p/1727503.html
Copyright © 2011-2022 走看看