zoukankan      html  css  js  c++  java
  • 三个JS函数闭包(closure)例子

    闭包是JS较难分辨的一个概念,我只是按自己的理解写下来,如有不对还请指出。 

    函数闭包是指当一个函数被定义在另一个函数内部时,这个内部函数使用到的变量会被封闭起来形成一个闭包,这些变量会保持形成闭包时设定的值。当内部函数被从外面访问时,它会显示出当时形成闭包时封闭的值。下面举例说明:

    例一:

     <body onload="alert(caculate(1,2))">
      
     </body>
    </html>
    <script type="text/javascript">
    <!--
    function caculate(op1,op2){
        var num=6;
        function add(){
            return op1+op2+num;
        }
    
        return add();
    }
    //-->
    </script>

    上面这段代码执行会显示9.

    例二:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> New Document </title>
     </head>
    
     <body onload="init()">
            <div>123</div>
            <div>abc</div>
            <div>456</div>
            <div>cde</div>
            <div>567</div>
            <div>efg</div>
            <div>789</div>
            <div>fgh</div>
     </body>
    </html>
    <script type="text/javascript">
    <!--
    function init(){
        var divs=document.getElementsByTagName("div");
    
        for(var i=0;i<divs.length;i++){
            var div=divs[i];
            (function(div){
                div.onclick=function(){
                    alert(this.innerHTML);
                };
            })(div);
        }
    }
    //-->
    </script>

    当每个div被点击时会显示其中的文字。

    例三: 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> New Document </title>
     </head>
    
     <body onload="init()">
        <table border="1">
            <tbody id="mytable">
                <tr><td>1</td><td>abc</td><td>123</td><td>1000</td></tr>
                <tr><td>2</td><td>bcd</td><td>456</td><td>10000</td></tr>
                <tr><td>3</td><td>cde</td><td>567</td><td>10000</td></tr>
                <tr><td>4</td><td>def</td><td>789</td><td>10000</td></tr>
            </tbody>
        </table>
     </body>
    </html>
    <script type="text/javascript">
    <!--
    function init(){
        var table=document.getElementById("mytable");
    
        for(var i=0;i<table.rows.length;i++){
            var tr=table.rows[i];
            var tds=tr.getElementsByTagName("td");
    
            for(var j=0;j<tds.length;j++){
                var td=tds[j];
    
                (function(td){
                    td.onclick=function(){alert(this.innerHTML)};
                })(td);
            }
        }
    }
    //-->
    </script>

    当表格里单元格被点击时会显示其中的文字。

    例程下载

    2017年1月15日12:56:02

  • 相关阅读:
    【转】Android Touch事件传递机制解析
    通过Selector来设置按钮enable/unable状态的样式
    Android中的selector
    Android单元测试
    Android Lint简介
    制作高仿QQ的聊天系统(下)—— Adapter & Activity
    EditText的监听器和自定义回车事件
    监听Listview的滚动状态,是否滚动到了顶部或底部
    制作高仿QQ的聊天系统(上)—— 布局文件 & 减少过度绘制
    数据更新后让ListView自动滚动到底部
  • 原文地址:https://www.cnblogs.com/heyang78/p/6286337.html
Copyright © 2011-2022 走看看