JS高级——闭包练习
从上篇文章我们知道与浏览器的交互操作如鼠标点击，都会被放入任务队列中，而放入到任务队列中是必须等到主线程的任务都执行完之后才能执行，故而我们有时利用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高级——闭包练习的更多相关文章
- JS高级——闭包
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- js高级-闭包
function foo(x){ var tmp = 3; return function(y){ //把一个函数作为返回值,定义时候的作用域 console.log(x+y+(++tmp)) //+ ...
- JS高级---闭包小案例
闭包小案例 普通的函数 //普通的函数 function f1() { var num = 10; num++; return num; } console.log(f1()); //11 conso ...
- 《Node.js 高级编程》简介与第二章笔记
<Node.js 高级编程> 作者简介 Pedro Teixerra 高产,开源项目程序员 Node 社区活跃成员,Node公司的创始人之一. 10岁开始编程,Visual Basic.C ...
- 理解运用JS的闭包、高阶函数、柯里化
JS的闭包,是一个谈论得比较多的话题了,不过细细想来,有些人还是理不清闭包的概念定义以及相关的特性. 这里就整理一些,做个总结. 一.闭包 1. 闭包的概念 闭包与执行上下文.环境.作用域息息相关 执 ...
- js高级-面向对象继承
一.工厂模式创建对象及优缺点 继承就是把公共的部分抽象出来作为父类,基类.吃饭,跑步等 var a = {}; //批量创建不方便,不能重复设置公共属性的代码 //工厂模式出现了,创建10个Cat对象 ...
- [ JS 进阶 ] 闭包，作用域链，垃圾回收，内存泄露
原网址:https://segmentfault.com/a/1190000002778015 1. 什么是闭包? 来看一些关于闭包的定义: 闭包是指有权访问另一个函数作用域中变量的函数 --< ...
- js高级---js架构
ECMAScript1997 年欧洲计算机制造商协会 39 号技术委员会制定了ECMA-262标准(别名 ECMAScript),而浏览器只是负责实现,ie浏览器实现的结果是jscript,远景浏览器 ...
- JS的闭包、高阶函数、柯里化
本文原链接:https://cloud.tencent.com/developer/article/1326958 https://cloud.tencent.com/developer/articl ...
随机推荐
- RxJava如何结合观察者与链式处理
RxJava如何结合观察者与链式处理 Author: Dorae Date: 2018年12月3日17:10:31 转载请注明出处 一.概述 首先问自己几个问题,如果非常清楚这几个问题的目的与答案,那 ...
- RDLC报表总结
这2天纠结的报表基本上已近完成大部分功能.现在总结一下自己近期的学习成果 首先制作微软RDLC报表由以下三部分构成:1.制作自己的DateSet集合(就是报表的数据集):2.制作自己的报表文件.rdl ...
- Kruscal算法
Kruscal算法也是最小生成树算法,这个算法感觉起来可能更直观一点,我们要求最小生成树,我们可以依次找图中的最小权重所在的边,只要这些边不构成回路就添加,知道覆盖所有的顶点. 算法的具体过程: 1. ...
- _deque实现
/* deque是一种双向开口的连续线性空间,可以在头尾两端分别做元素的插入和删除操作 常用接口:back(), front(), push_back(), pop_back(), push_fron ...
- Ubuntu 10.04.3 挂载NTFS移动硬盘
1: fdisk -l #查看所有连接到电脑上的储存设备 2: mkdir -p /mnt/需要掛的分區 #在mnt裏建立準備掛載分區的目錄 3: mount -t ntfs /dev/需要掛的分 ...
- Lucene.Net 与 盘古分词
1.关键的一点,Lucene.Net要使用3.0下面的版本号,否则与盘古分词接口不一致. 关键代码例如以下 using System; using System.IO; using System.Co ...
- POJ 1260-Pearls（DP）
Pearls Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 7465 Accepted: 3695 Descriptio ...
- C#程序猿学习 Python
孙广东 2016.1.1 交互: C# 运行Python代码: http://stackoverflow.com/questions/11779143/run-a-python-script-fro ...
- Linux VM环境配置
1. 直接打 ifconfig ,显示 bash: ifconfig: command not found 打入全路径,查看IP /sbin/ifconfig 2. 主机ping不通虚拟机, ...
- node.js中的require
初初接触node.js,印象最深刻的就是开头密密麻麻的require了. 这是什么东西? 其实也没啥大惊小怪的.require就是为了引用别的js文件,利于模块化编程,重用.以及避免过多代码挤在同一个 ...