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

  • 相关阅读:
    jsonp跨域请求
    Vue-cli脚手架安装
    微信小程序获取用户信息“授权失败”场景的处理
    微信小程序
    获取url参数
    [git] github 使用简单记录
    [翻译]《高级英汉翻译理论与实践》摘录
    [Java] 模板引擎 Velocity 随笔
    [Java] 垃圾回收 ( Garbage Collection ) 的步骤演示
    [Java] 垃圾回收机制 ( Garbage Collection ) 简介
  • 原文地址:https://www.cnblogs.com/heyang78/p/6286337.html
Copyright © 2011-2022 走看看