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 ...
随机推荐
- poj 2112
#include <cstdio> #include <cstring> ;//点数的最大值 ;//边数的最大值 const int INF=0x3fffffff; struc ...
- [codevs 1243][网络提速（最短路分层思想）
题目:http://dev.codevs.cn/problem/1243/ 分析: 先容易想到将一个点拆成m个点,分别对应不同的边连过去,但是想不到控制加速器数量的办法.看了题解才知道,每个点的分层, ...
- LVS 源代码分析
http://blog.chinaunix.net/uid/11207493.html http://zh.linuxvirtualserver.org/blog/3309
- Win7 无法安装Office source engine 足够的权限安装系统服务怎么办
运行CMD,输入命令:sc delete ose 重试即可.
- MYSQL利用Navicat对含有Bold字段表进行导入导出
MYSQL中含有Blob字段是一件挺麻烦的事情,导出导入不方便.我介绍我是怎么做的. 1.在MYSQL的my.ini最后中加入一行配置max_allowed_packet = 100M,重新启动MYS ...
- 在InternetExplorer.Application中显示本地图片
忘记了,喜欢一个人的感觉 Demon's Blog » 程序设计 » 在InternetExplorer.Application中显示本地图片 « 对VBS效率的再思考——处理二进制数据 Wo ...
- Java中根据字节截取字符串
一.简介 为了统一世界各国的字符集,流行开了Unicode字符集,java也支持Unicode编码,即java中char存的是代码点值,即无论是‘A’还是‘中’都占两个字节. 代码点值:与Unicod ...
- expect安装测试-批量用户管理
安装: yum list | grep expect yum install expect 批量创建用户: ansible mysqldb -m user -a 'name=ansible state ...
- [NOIP2003普及组]麦森数（快速幂+高精度）
[NOIP2003普及组]麦森数(快速幂+高精度) Description 形如2^P-1的素数称为麦森数,这时P一定也是个素数.但反过来不一定,即如果P是个素数,2^P-1不一定也是素数.到1998 ...
- 【POJ 3614】 Sunscreen
[题目链接] http://poj.org/problem?id=3614 [算法] 将MinSPF从大到小排序,每头牛找SPF值最大的防晒霜 [代码] #include <algorithm& ...