JavaScript闭包 循环输出i
html
<body>
<p>产品一</p>
<p>产品二</p>
<p>产品三</p>
<p>产品四</p>
<p>产品五</p>
</body>
js
function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function() {
alert(i);
}
}
}
window.onload = init;
上面代码点击每个p，输出都是5，因为这里的 i 是个引用。演示地址
要想输出对应的i，有以下方法：
1、将变量 i 保存给在每个段落对象（p）上
function init() {
var pAry = document.getElementsByTagName("p");
for (var i = 0; i < pAry.length; i++) {
pAry[i].i = i;
pAry[i].onclick = function() {
alert(this.i);
}
}
}
window.onload = init;
2、将变量 i 保存在匿名函数自身
function init() {
var pAry = document.getElementsByTagName("p");
for (var i = 0; i < pAry.length; i++) {
(pAry[i].onclick = function() {
alert(arguments.callee.i);
}).i = i;
}
}
window.onload = init;
caller返回一个函数的引用，这个函数调用了当前的函数;
callee返回正在执行的函数本身的引用，它是arguments的一个属性
3.加一层闭包，i以函数参数形式传递给内层函数
function init() {
var pAry = document.getElementsByTagName("p");
for (var i = 0; i < pAry.length; i++) {
(function(arg) {
pAry[i].onclick = function() {
alert(arg);
};
})(i); //调用时参数
}
}
window.onload = init;
4、加一层闭包，i以局部变量形式传递给内存函数
function init() {
var pAry = document.getElementsByTagName("p");
for (var i = 0; i < pAry.length; i++) {
(function() {
var temp = i; //调用时局部变量
pAry[i].onclick = function() {
alert(temp);
}
})();
}
}
window.onload = init;
5、加一层闭包，返回一个函数作为响应事件（注意与3的细微区别）
function init() {
var pAry = document.getElementsByTagName("p");
for (var i = 0; i < pAry.length; i++) {
pAry[i].onclick = function(arg) {
return function() { //返回一个函数
alert(arg);
}
}(i);
}
}
window.onload = init;
6、用Function实现，实际上每产生一个函数实例就会产生一个闭包
function init() {
var pAry = document.getElementsByTagName("p");
for (var i = 0; i < pAry.length; i++) {
pAry[i].onclick = new Function("alert(" + i + ");"); //new一次就产生一个函数实例
}
}
window.onload = init;
7、用Function实现，注意与6的区别
function init() {
var pAry = document.getElementsByTagName("p");
for (var i = 0; i < pAry.length; i++) {
pAry[i].onclick = Function('alert(' + i + ')')
}
}
window.onload = init;
看了这篇文章，又想到用es5,es6的两个方法：
8、用es5 forEach函数
这里用forEach也行成了一个所谓的闭包，forEach里的执行函数也行成了一个闭包，每个执行体里，index都是一局部作用域，那为什么用Array.from呢，我们也可以用[].slice.call(node)我们类数组对象转化成真正的数组
function init() {
var pAry = document.getElementsByTagName("p");
//pAry = Array.from(pAry);
pAry = Array.prototype.slice.call(pAry);
pAry.forEach(function(currentItem,index){
currentItem.onclick = function(){
alert(index);
}
})
}
window.onload = init;
9、用es6的let声明块级变量
function init() {
var pAry = document.getElementsByTagName("p");
for( let i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function() {
alert(i);
}
}
}
window.onload = init;
知乎关于这个问题也有一些回答
https://www.zhihu.com/question/33468703
JavaScript闭包 循环输出i的更多相关文章
- JavaScript利用闭包循环绑定事件
我们经常在做前端面试题的时候,会遇到循环绑定事件后,输出打印结果,很多人总是搞不清楚,今天借此机会跟大家梳理一下闭包相关作用. 1.首先我们举一个简单的例子. html部分: <a href=& ...
- 从javascript的循环问题来看待闭包本质
第一次接触这个问题还是在我刚开始学js的时候,当时就是一头雾水,时隔一年多了,突然又想起了这个问题,在这个春气盎然的周末,我就坐下来研究下并把结果和大家分享下: 先看代码:demo.html < ...
- JavaScript学习笔记-循环输出菱形，并可菱形自定义大小
var Cen = 6;//定义菱形中部为第几行(起始值为0) //for循环输出菱形 document.write("<button onclick='xh()'>点我for循 ...
- JavaScript闭包深入解析
for (var i=1; i<=5; i++) { setTimeout( function timer() { console.log( i ); }, i*1000 ); } --上面这段 ...
- JavaScript 闭包系列二（匿名函数及函数的闭包）
一. 匿名函数 1. 函数的定义,可分为三种 1) 函数声明方式 function double(x) { return 2*x; } 2)Function构造函数,把参数列表和函数体都作为字 ...
- JavaScript闭包模型
JavaScript闭包模型 ----- [原创翻译]2016-09-01 09:32:22 < 一> 闭包并不神秘 本文利用JavaScript代码来阐述闭包,目的是为了使普通 ...
- JavaScript 闭包整合
初遇闭包感觉很困惑,上网查看了些许介绍,有很多没看懂,就想先对能懂的东西整整 首先觉得要了解闭包,要先对一.JavaScript的变量作用域和作用域链有基本了解 1.变量的作用域分为:全局变量和局部变 ...
- JavaScript ——闭包理解
昨天晚上听别人谈起闭包这个东西,虽然对js有一点了解但却丝毫没有印象,今天也没什么事就顺便研究了一下满足好奇宝宝.整合于网上的理解,记录一下. 一.闭包的作用域 要理解闭包,首先必须理解Javascr ...
- Javascript闭包的一些研究
原文:Javascript闭包的一些研究 本文不谈闭包的概念,因为概念容易把人搞晕,本文希望通过几个鲜活的例子来探究闭包的性质,相信对理解闭包会有所帮助. 程序1 var f = (function( ...
随机推荐
- OAuth2.0 social_django微博第三方登录
python网站第三方登录,social-auth-app-django模块, social-auth-app-django模块是专门用于Django的第三方登录OAuth2协议模块 目前流行的第三方 ...
- PowerShell批量启动/关闭Azure VM
备注:以下例子中出现的JohnsonWeb, JohnsonVm均是虚拟机的名称.在运行Powershell脚本之前,请导入您的订阅文件. 根据条件启动/关闭虚拟机,例如根据虚拟机名称,批量启动/关闭 ...
- MySQL之架构与历史（二）
多版本并发控制 MySQL的大多数事务型存储引擎实现的都不是简单的行级锁.基于提升并发性能的考虑,它们一般都同时实现了多版本并发控制(MVCC).不仅是MySQL,包括Oracle.PostgreSQ ...
- Java资料整理
Java资料整理 原创 2017年08月25日 17:20:44 14211 1.LocalThread的应用场景,数据传输适合用LocalThread么 2.linux的基本命令 软链接.更 ...
- OpenStack之Glance源码简析
Glance简介 OpenStack镜像服务器是一套虚拟机镜像发现.注册.检索. glance架构图: Glance源码结构: glance/api:主要负责接收响应镜像管理命令的Restful请求, ...
- 59、佳博wifi打印机怎么配置
1.去这里下载配置软件(注意,需要再windows下进行)http://pan.baidu.com/s/1bn1y4FX,并解压安装程序 2.连上wifi打印机的热点,比如说佳博打印机的默认为Gpri ...
- 【N-Queens】cpp
题目: The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no two que ...
- 计算几何-凸包-toleft test
toLeftTest toLeftTest是判断一个点是否在有向直线左侧的算法. 当点s位于向量pq左侧时,toLeftTest返回true.当点s位于向量pq右侧时,toLeftTest返回fals ...
- 爬虫：Scrapy1
Python 2.7 npm install scrapy 步骤: 创建一个 Scrapy 项目 定义提取的 Item 编写爬取网站的 Spider 并提取 Item 编写 Item Pipeline ...
- 基数排序（java实现）
基数排序 就是先比较数组中元素的个位数,排序得到新的数组,然后比较新的数组中的十位数,排序得到新数组,然后再对最新得到的数组比较百位数.......依次循环 比如{82 ,31 ,29 ,71, 7 ...