• 三个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

  • 相关阅读:
    CentOS6.0 yum php mcrypt 扩展安装问题
    WordPress入门系列之基本设置
    ./configure 配置文件时出错checking for g++... no
    锐捷硬件防火墙
    CentOS 安装php mcrypt和mbstring的扩展
    (转)在asp.net 2.0中使用SqlBulkCopy类迁移数据
    正则表达式对象&&String对象
    SQL Server 和 SQLite 时间函数汇总
    FreeBSD下nginx并支持php配置详解
    从Ports安装MySQL
  • 原文地址:https://www.cnblogs.com/heyang78/p/6286337.html
Copyright © 2020-2023  润新知