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 ...
随机推荐
- ORACLE分区表删除分区数据
--全删除 ALTER TABLE tableName DROP PARTITION partionName UPDATE GLOBAL INDEXES; --清数据 ALTER TABLE tabl ...
- springboot整合dubbo的简单案例
使用框架: jdk 1.8 springboot-2.1.3 dubbo-2.6 spring-data-jpa-2.1.5 一.开发dubbo服务接口: 按照Dubbo官方开发建议,创建一个接口项目 ...
- Neo4j教程 Neo4j视频教程 Neo4j 图数据库视频教程
课程发布地址 地址: 腾讯课堂<Neo4j 图数据库视频教程> https://ke.qq.com/course/327374?tuin=442d3e14 作者 庞国明,<Neo4j ...
- [JavaEE] Testing the Java EE Application : Basic Arquillian integration test
We have model like this: package com.pluralsight.bookstore.model; import javax.persistence.*; import ...
- 插件化开发—动态载入技术载入已安装和未安装的apk
首先引入一个概念,动态载入技术是什么?为什么要引入动态载入?它有什么优点呢?首先要明确这几个问题.我们先从 应用程序入手,大家都知道在Android App中.一个应用程序dex文件的方法数最大不能超 ...
- Ubuntu下用hadoop2.4搭建集群（伪分布式）
要真正的学习hadoop,就必需要使用集群,可是对于普通开发人员来说,没有大规模的集群用来測试,所以仅仅能使用伪分布式了.以下介绍怎样搭建一个伪分布式集群. 为了节省时间和篇幅,前面一些步骤不再叙述. ...
- Android中不同方向嵌套滑动的解决方式（ListView为样例）
前言: 就像手机QQ的聊天消息列表.一个纵向滑动的ListView列举全部消息,但每一条消息能够横向滑动. 而默认情况下,仅仅能有一个地方消化处理触摸事件,要么ListView吃掉这个事件.要么子It ...
- LeetCode 551. Student Attendance Record I (学生出勤纪录 I)
You are given a string representing an attendance record for a student. The record only contains the ...
- 数据分析在web交互设计中的作用 页面跳出率 100% 原因分析
通过分析访问的路径,发现,访问者访问其他页面,直接跳出 页面跳出率 100% 说明: 连作者都发现的导航路径不清晰 对导航进行改版:清晰.明了
- 51nod 1611 金牌赛事
被亮亮D飞啦!!QWQ 这题明明是最大权闭合子图+线段树优化构图好不好 被迫考虑DP,并且考虑f[i]表示到第i个位置的最大值(第i个位置可选可不选) 对于最终的答案,我们可以分割成一段一段的,也就是 ...