从上篇文章我们知道与浏览器的交互操作如鼠标点击，都会被放入任务队列中，而放入到任务队列中是必须等到主线程的任务都执行完之后才能执行，故而我们有时利用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. hdu 2094拓扑排序map实现记录

    #include<stdio.h> #include<iostream> #include<algorithm> #include<string> #i ...

  2. Spring 进行junit单元测试时，出现method ‘initializationError’ 错误

    首先检查一下所有的方法是否为public 然后看是否有commons-logging这个日志包

  3. java数组知识总结（二）//按操作

    一.定长数组 1.构造 直接创建 String[] aArray = new String[5]; String[] bArray = {"a","b",&qu ...

  4. Codeforces Round #403(div 2)

    A =w= B 题意:一个数轴上有n个整点,每个点都有一个速度,选一个点让他们集合,使得时间最少. 分析: 直接三分 C 题意:给定一棵树,任意两个距离小等于二的点不能染相同的颜色,求最小颜色数和染色 ...

  5. -- > define的用法与学习（1）

    在不久之前,我一直不理解为神马大家在做题时经常用define来代替某些函数,或者用来直接定义某些极大的变量.It is not until today that I understand why it ...

  6. - > 动规讲解基础讲解四——最大子段和问题

    给出一个整数数组a(正负数都有),如何找出一个连续子数组(可以一个都不取,那么结果为0),使得其中的和最大?   例如:-2,11,-4,13,-5,-2,和最大的子段为:11,-4,13.和为20. ...

  7. Python实例--C#执行Python脚本,传参

    # -*- coding: utf-8 -*- # 第一行的目的,是为了让代码里面,可以有中文注释信息. (否则要运行报错) # 这个 Python 脚本, 用于被 C# 来调用. # 简单测试 He ...

  8. Azure Event hub usage

    1. create event hub on azure watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/40 ...

  9. Javascript中双等号(==)隐性转换机制 JS里charCodeAt()和fromCharCode()方法拓展应用：加密与解密

    Javascript中双等号(==)隐性转换机制   在Javascript中判断相等关系有双等号(==)和三等号(===)两种.其中双等号(==)是值相等,而三等号(===)是严格相等(值及类型是否 ...

  10. MVC异常过滤器 （错误页）

    控制器 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Syste ...