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

    题目描述 Description 小浣熊松松和朋友到野外露营,没想到遇上了π年一次的大洪水,好在松松是一只爱观察的小浣熊,他发现露营地的地形和洪水有如下性质: ①露营地可以被看做是一个N*M的矩形方阵 ...

  2. A + B Problem Too

    Problem Description This problem is also a A + B problem,but it has a little difference,you should d ...

  3. [bzoj1115][POI2009]石子游戏Kam_博弈论_阶梯博弈

    石子游戏 Kam bzoj-1115 POI-2009 题目大意:给定n堆石子,两个人轮流取石子.每堆石子的个数都不少于前一堆石子.每次取后也必须维持这个性质.问谁有必胜策略. 注释:$1\le ca ...

  4. P1082||T1200 同余方程 codevs|| 洛谷

     时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond   http://codevs.cn/problem/1200/||https://www.luogu.o ...

  5. Python: 解决simple-db-migrate的"No module named 'MySQLdb'错误

    sudo apt-get install libmysqlclient-dev sudo -H pip3 install mysqlclient

  6. 【CV论文阅读】 Fast RCNN + SGD笔记

    Fast RCNN的结构: 先从这幅图解释FAST RCNN的结构.首先,FAST RCNN的输入是包含两部分,image以及region proposal(在论文中叫做region of inter ...

  7. 【转】java中Thread类方法介绍

    原文: java中Thread类方法介绍 http://blog.csdn.net/seapeak007/article/details/53395609 这篇文章找时间分析一下!!!:http:// ...

  8. ubuntu Change Language

    慎用 所謂的語系(locale),其實包含語言及地區的設定,因為除了語言之外,國家與國家的日期表示方式.數字格式.貨幣符號.度量單位可能都不一樣,所以才會有了這個locale的發明,依照國家和語言給予 ...

  9. [Vue-rx] Pass Template Data Through domStreams in Vue.js and RxJS

    domStreams enable you to pass additional data along the stream that can be provided by the template ...

  10. 专注UI——是alert（）打败了你！

    在上家公司.常常在页面上写aler()提示代码.没有认为有什么,好寻常.认为提示就本来应该是这种,可是,当我到了这家公司.在測试的时候,由于測试人员看到了一个aler弹出框.结果我的页面被退回重写,后 ...