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 ...
随机推荐
- Neo4j ETL工具快速上手：简化从关系数据库到图数据库的数据迁移
注:本文系从https://medium.com/neo4j/tap-into-hidden-connections-translating-your-relational-data-to-graph ...
- DJANGO中正规的建立与USER外键的方式
以前都是直接与user 最近看书,上说settings.AUTH_USER_MODEL,这样好些...是为记. from django.db import models from django.con ...
- ORACLE分区表删除分区数据
--全删除 ALTER TABLE tableName DROP PARTITION partionName UPDATE GLOBAL INDEXES; --清数据 ALTER TABLE tabl ...
- 基于QQ服务器JavaMail邮箱SSL密码第三方发送邮件
网上javaMail邮箱推送代码太多,大都是有缺陷的,今天做项目刚好要用到,于是发了大半天的时间解决的这个问题. jar包:javax.mail.jar 代码: import java.io.IOEx ...
- - > 并查集模板
思路:在博客园里,有对并查集思路的详解,模板神马的只是饭后甜点: 这儿有只野生模板君飘过,请各位OIer尽快捕捉 #include<iostream> #include<cstdio ...
- Linux下使用tcpdump进行抓包（转）
技巧: 1.可以通过tcpdump抓取某个网卡的包,然后输出日志文件,通过Wireshark进行分析. 2.可以设置Wifi热点,然后通过手机连接这个热点,然后进行tcpdump的分析.而且在Ubun ...
- 编译Linux使用的.a库文件
编译Linux使用的.a库文件 首先是须要编译成.a的源文件 hello.h: #ifndef __INCLUDE_HELLO_H__ #define __INCLUDE_HELLO_H__ void ...
- vim中自己主动加入凝视 加入文本信息
工欲善其事,必先利其器.在开发过程中.方便.快捷的开发环境.能提高工作效率.优美的界面能让我们心情愉悦:最重要的是,能保持我们在外行严重高深莫測的牛逼~ 假设在创建新的源程序文件时希望能自己主动产生一 ...
- 使用Code First建模自引用关系笔记 asp.net core上使用redis探索(1) asp.net mvc控制器激活全分析 语言入门必学的基础知识你还记得么？ 反射
使用Code First建模自引用关系笔记 原文链接 一.Has方法: A.HasRequired(a => a.B); HasOptional:前者包含后者一个实例或者为null HasR ...
- LeetCode 171. Excel Sheet Column Number （Excel 表格列数字）
Related to question Excel Sheet Column Title Given a column title as appear in an Excel sheet, retur ...