闭包是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>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </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>

例三：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </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

三个JS函数闭包（closure）例子的更多相关文章

  1. js 函数闭包内部返回函数体调用方法难点解答

    今天在网上,看到一篇关于js函数难点的文章,js函数的一些难点.在那上面提了一下,关于js函数返回另一个函数的问题,并附上了一道面试题: var add = function(x){ var sum ...

  2. 彻底搞清js中闭包(Closure)的概念

    js中闭包这个概念对于初学js的同学来说, 会比较陌生, 有些难以理解, 理解起来非常模糊. 今天就和大家一起来探讨一下这个玩意. 相信大家在看完后, 心中的迷惑会迎然而解. 闭包概念: 闭包就是有权 ...

  3. 关于js函数闭包的理解

    在开始之前我们先来了解一下函数的变量作用域 JavaScript 变量可以是局部变量或全局变量. 私有变量可以用到闭包. 全局变量 函数可以访问由函数内部定义的变量,如: 实例1 function m ...

  4. JavaScript学习记录总结（六）——js函数闭包特性

    <script type="text/javascript">    function arrdemo(){        var arr=["hello&q ...

  5. 如何编写高质量的 JS 函数（3） --函数式编程[理论篇]

    本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/EWSqZuujHIRyx8Eb2SSidQ作者:杨昆 [编写高质量函数系列]中, <如何 ...

  6. VC与JavaScript交互(二) --- 调用JS函数

    这一章,我们来动手实践VC调用JS函数. 我们动手写一个HTML,其中包含这样一段JS代码: //[html] <script type="text/javascript"& ...

  7. 两个实例轻松理解js函数预解析

    js函数预解析 例子1: 先上一段代码,看看能不能写出最终的执行结果. console.log(a); var a = 1; console.log(a); function a(){ console ...

  8. js 函数定义的方式

    js 函数定义的方式 一.总结 一句话总结: 最常见就下面三种 最常见:function func1([参数]){/*函数体*/} 将匿名函数赋值给变量:var func2=function([参数] ...

  9. js函数只执行一次，函数重写，变量控制与闭包三种做法

    一.情景需求 调用后台接口需要附带token信息,那么在每个请求的头部添加token的做法就不太优雅了:一个网站请求100次,那就得写添加100次token,假设某天接口有所变动,改起来就十分麻烦了. ...

随机推荐

  1. MYSQL主从同步故障一例及解决过程

    公司里有两个mysql服务器做主从同步,某天Nagios发来报警短信,mysqla is down...赶紧联系机房,机房的人反馈来的信息是 HARDWARE ERROR 后面信息省略,让机房记下错误 ...

  2. SQLServer中的变量：局部变量，全局变量

    SQLServer中的全局变量   变量 Transact-SQL语言中有两种形式的变量,一种是用户自己定义的局部变量,另外一种是系统提供的全局变量.局部变量 局部变量是一个能够拥有特定数据类型的对象 ...

  3. Myeclipse10、Maven构建Javaweb项目

    主要介绍如何使用 Myeclipse 10 构建 Maven Web 项目,关于 Maven 的介绍就略过了. 工具/原料   myeclipse apache-maven-3.1.0 方法/步骤   ...

  4. MUI判断网络连接以及监听网络变化JS

    来源:netChange问题:怎么判断网络状态 MUI用于获取当前设备的网络类型 function plusReady(){ var types = {}; types[plus.networkinf ...

  5. 安装eclipse要和JDK的位数相对应

    即JDK是32位时,eclipse也要装32位的

  6. 谈一谈第九届移动互联网开发者大会（ MDCon 2016 ）

    4G时代的开启以及移动终端设备的凸显必将为移动互联网的发展注入巨大的能量,2016年移动互联网产业必将带来前所未有的飞跃.第九届移动互联网开发者大会以"DT时代的移动开发技术创新" ...

  7. C#数组和元组

    声明数组 int[] myArray; 初始化数组 myArray = new int[4]; 数组是引用类型当初始化完毕后,将在托管堆上分配内存空间,其结构图如下

  8. 后台验证url是不是有效的链接

    /** * 判断链接是否有效 * 输入链接 * 返回true或者false */ public static boolean isValid(String strLink){ URL url=null ...

  9. 单击dbgrid列标题排序 升降序

    delphi中如何通过单击列标题进行升降排序, 在dbgrid的ontitleclick事件里添加这样的事件处理 procedure TForm3.DBGrid1TitleClick(Column: ...

  10. CentOS系统更换软件安装源aliyun的

    CentOS系统更换软件安装源第一步:备份你的原镜像文件,以免出错后可以恢复. mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS ...