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 ...
随机推荐
- nyoj_600_花儿朵朵_201404162000
花儿朵朵 时间限制:1000 ms | 内存限制:65535 KB 难度:5 描述 春天到了,花儿朵朵盛开,hrdv是一座大花园的主人,在他的花园里种着许多种鲜花,每当这个时候,就会有一大群游 ...
- SiteMesh基础教程
SiteMesh是由一个基于Web页面布局.装饰以及与现存Web应用整合的框架.它能帮助我们在由大量页面构成的项目中创建一致的页面布局和外观,如一致的导航条,一致的banner,一致的版权,等等. 教 ...
- Oracle基础（四）pl/sql
PL/SQL也是一种程序语言,叫做过程化SQL语言(Procedural Language/SQL). PL/SQL是Oracle数据库对SQL语句的扩展.在普通SQL语句的使用上添加了编程语言的特点 ...
- Qt移动应用开发（二）：使用动画框架
Qt移动应用开发(二):使用动画框架 上一篇博客介绍了怎样使用Qt的QML来对屏幕分辨率大小进行适应,其实,不同分辨率的适应是一个很棘手的问题,除了分辨率不同外,宽高比(aspect ratio)也不 ...
- HDOJ--1285--确定比赛名次
确定比赛名次 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...
- Android应用程序相关的文件文件夹具体解释
一.方法介绍: 每一个Android应用程序都能够通过Context来获取与应用程序相关的文件夹,这些文件夹的功能各异,每一个文件夹都有自己的特点.有时候可能会搞混淆,本文结合andr ...
- Java进程堆外内存（off heap）大小
一.使用ByteBuffer.allocateDirect分配的off heap内存大小 本机进程 在Jvisualvm中安装 Mbeans插件.然后查看java.nio/BufferPool/dir ...
- R语言学习笔记-Error in ts(x):对象不是矩阵问题解决
1.问题 在对时间序列进行拟合操作时,发生:Error in ts(x):对象不是矩阵的错误,而直接在arima()函数中使用时没有问题的. > sample<-c2 > sampl ...
- ios dyld: Library not loaded: @rpath/xxx.framework/xxx 之根本原因
碰到问题 dyld: Library not loaded: @rpath/xxx.framework/xxx Referenced from: /var/containers/Bundle/Appl ...
- MongoDB 开机自启动
MongoDB安装了以后,应当设置开机自启动. 假设启动命令如下: sudo /db/mongodb/265/bin/mongod --config /db/conf/mongodb/mongodb. ...