从上篇文章我们知道与浏览器的交互操作如鼠标点击，都会被放入任务队列中，而放入到任务队列中是必须等到主线程的任务都执行完之后才能执行，故而我们有时利用for循环给dom注册事件时候，难以获取for循环中对应的i值，可是我们可以利用闭包啊

方法1：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            height: 30px;

            border: 1px solid #000;

            margin: 5px;

        }

    </style>

</head>

<body>

<div>我是第1个div</div>

<div>我是第2个div</div>

<div>我是第3个div</div>

<div>我是第4个div</div>

<div>我是第5个div</div>

<div>我是第6个div</div>

<div>我是第7个div</div>

<div>我是第8个div</div>

<div>我是第9个div</div>

<div>我是第10个div</div>

<script>

var divs=document.getElementsByTagName('div');

for (var i = 0; i < divs.length; i++) {

    function foo(j) {

        return function () {

            console.log('这是第'+(j+1)+'个div');

        }

    }

    var f=foo(i);

    divs[i].onclick=f;

}

</script>

</body>

</html>

方法2：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div{

            height: 30px;

            border: 1px solid #000;

            margin: 5px;

        }

    </style>

</head>

<body>

<div>我是第1个div</div>

<div>我是第2个div</div>

<div>我是第3个div</div>

<div>我是第4个div</div>

<div>我是第5个div</div>

<div>我是第6个div</div>

<div>我是第7个div</div>

<div>我是第8个div</div>

<div>我是第9个div</div>

<div>我是第10个div</div>

<script>

    var divs=document.getElementsByTagName('div');

    for (var i = 0; i < divs.length; i++) {

        divs[i].onclick=function (j) {

            return function () {

                console.log('这是第'+(j+1)+'个div');

            }

        }(i);

    }

</script>

</body>

</html>

在方法2中我们运用了立即执行函数表达式（函数自调用）方法，函数自调用的形式还有如下方法：

<script>

    (function () {

        console.log(0);

    })();

    +function () {

        console.log(1);

    }();

    -function () {

        console.log();

    }();

</script>

JS高级——闭包练习的更多相关文章

  1. JS高级——闭包

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. js高级-闭包

    function foo(x){ var tmp = 3; return function(y){ //把一个函数作为返回值,定义时候的作用域 console.log(x+y+(++tmp)) //+ ...

  3. JS高级---闭包小案例

    闭包小案例 普通的函数 //普通的函数 function f1() { var num = 10; num++; return num; } console.log(f1()); //11 conso ...

  4. 《Node.js 高级编程》简介与第二章笔记

    <Node.js 高级编程> 作者简介 Pedro Teixerra 高产,开源项目程序员 Node 社区活跃成员,Node公司的创始人之一. 10岁开始编程,Visual Basic.C ...

  5. 理解运用JS的闭包、高阶函数、柯里化

    JS的闭包,是一个谈论得比较多的话题了,不过细细想来,有些人还是理不清闭包的概念定义以及相关的特性. 这里就整理一些,做个总结. 一.闭包 1. 闭包的概念 闭包与执行上下文.环境.作用域息息相关 执 ...

  6. js高级-面向对象继承

    一.工厂模式创建对象及优缺点 继承就是把公共的部分抽象出来作为父类,基类.吃饭,跑步等 var a = {}; //批量创建不方便,不能重复设置公共属性的代码 //工厂模式出现了,创建10个Cat对象 ...

  7. [ JS 进阶 ] 闭包，作用域链，垃圾回收，内存泄露

    原网址:https://segmentfault.com/a/1190000002778015 1. 什么是闭包? 来看一些关于闭包的定义: 闭包是指有权访问另一个函数作用域中变量的函数 --< ...

  8. js高级---js架构

    ECMAScript1997 年欧洲计算机制造商协会 39 号技术委员会制定了ECMA-262标准(别名 ECMAScript),而浏览器只是负责实现,ie浏览器实现的结果是jscript,远景浏览器 ...

  9. JS的闭包、高阶函数、柯里化

    本文原链接:https://cloud.tencent.com/developer/article/1326958 https://cloud.tencent.com/developer/articl ...

随机推荐

  1. 20180710使用gh

    转自:http://www.ywnds.com/?p=14265 一.背景 GitHub正式宣布以开源的方式发布gh-ost:GitHub的MySQL无触发器在线更改表定义工具!下面是官方给出gh-o ...

  2. nginx,tornado,websocket,supervisord配置成型

    因为要上生产环境,所以配置还是专业一些比较好. nginx.conf upstream websocket_host { server 127.0.0.1:9527; } location /ws_l ...

  3. Memcached的Web管理工具MemAdmin（待实践）

    Memcached的Web管理工具有很多,但是最好用的应该是MemAdmin.基于PHP5开发,所以部署时要注意环境. 介绍:http://www.junopen.com/memadmin/ 下载:h ...

  4. springboot跨域请求设置

    当它请求的一个资源是从一个与它本身提供的第一个资源的不同的域名时,一个资源会发起一个跨域HTTP请求(Cross-site HTTP request).比如说,域名A ( http://domaina ...

  5. 1.4－动态路由协议OSPF⑧

    OSPF认证(保证寻路协议级别的网络安全) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 按照参与认证的成员,进行分类: 1:链路认证(参与认证的成员 ...

  6. 第K顺序统计量的求解

    一个n个元素组成的集合中,第K个顺序统计量(Order Statistic)指的是该集合中第K小的元素,我们要讨论的是如何在线性时间(linear time)里找出一个数组的第K个顺序统计量. 一.问 ...

  7. requireJS defined undefined

    requeireJS 在使用时,在 defined 注入一个依赖,路径正确,却发现获得的值却是 undefined .这时候就要考虑是否是“循环依赖”的原因了. 循环依赖就是: a.js 依赖了 b. ...

  8. 143 - ZOJ Monthly, October 2015 I Prime Query 线段树

    Prime Query Time Limit: 1 Second      Memory Limit: 196608 KB You are given a simple task. Given a s ...

  9. 技术的止境（客户价值第一，快速实现第二，边做边学，迅速成为牛人。紧贴客户的需求去做技术，立于不败之地。追求的目标：把一项产品去做好，用产品去养活自己和家人）good

    作为一个依靠技术来谋生的程序员,我最近一直在思考一个问题,有限的生命里,面对无限的技术更新,我要研究到什么程度才能算是完成我的成为技术大牛的目标呢?换而言之,那就是技术的止境在哪儿呢?深入的思考下去, ...

  10. C++之内部类（内部类就是外部类的友元类，单向友元。只是内部类比友元类多了一点权限）

    1. 内部类的概念 如果一个类定义在另一个类的内部,这个内部类就叫做内部类.注意此时这个内部类是一个独立的类,它不属于外部类,更不能通过外部类的对象去调用内部类.外部类对内部类没有任何优越的访问权限. ...