javascript解决for循环中i取值的问题（转载）
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//面试经典问题: function onMyLoad(){
/*
抛出问题:
此题的目的是想每次点击对应目标时弹出对应的数字下标 0~4,但实际是无论点击哪个目标都会弹出数字5
问题所在:
arr 中的每一项的 onclick 均为一个函数实例(Function 对象),这个函数实例也产生了一个闭包域,
这个闭包域引用了外部闭包域的变量,其 function scope 的 closure 对象有个名为 i 的引用,
外部闭包域的私有变量内容发生变化,内部闭包域得到的值自然会发生改变
*/
var arr = document.getElementsByTagName("p");
for(var i = 0; i < arr.length;i++){
arr[i].onclick = function(){
alert(i);
}
}
}
</script>
</head>
<body onload="onMyLoad()">
<p>产品一</p>
<p>产品二</p>
<p>产品三</p>
<p>产品四</p>
<p>产品五</p>
</body>
</html>
方法一：
/*
解决思路:
增加若干个对应的闭包域空间(这里采用的是匿名函数),专门用来存储原先需要引用的内容(下标),不过只限于基本类型(基本类型值传递,对象类型引用传递)
*/
for(var i = 0;i<arr.length;i++){
//声明一个匿名函数,若传进来的是基本类型则为值传递,故不会对实参产生影响,
//该函数对象有一个本地私有变量arg(形参) ,该函数的 function scope 的 closure 对象属性有两个引用,一个是 arr,一个是 i
//尽管引用 i 的值随外部改变 ,但本地私有变量(形参) arg 不会受影响,其值在一开始被调用的时候就决定了.
(function (arg) {
arr[i].onclick = function () { //onclick函数实例的 function scope 的 closure 对象属性有一个引用 arg,
alert(arg); //只要 外部空间的 arg 不变,这里的引用值当然不会改变
}
})(i); //立刻执行该匿名函数,传递下标 i(实参)
}方法二：
/*
解决思路:
将下标作为对象属性(name:"i",value:i的值)添加到每个数组项(p对象)中
*/
for(var i = 0;i<arr.length;i++){
//为当前数组项即当前 p 对象添加一个名为 i 的属性,值为循环体的 i 变量的值,
//此时当前 p 对象的 i 属性并不是对循环体的 i 变量的引用,而是一个独立p 对象的属性,属性值在声明的时候就确定了
//(基本类型的值都是存在栈中的,当有一个基本类型变量声明其等于另一个基本变量时,此时并不是两个基本类型变量都指向一个值,而是各自有各自的值,但值是相等的)
arr[i].i = i;
arr[i].onclick = function () {
alert(this.i);
}
}
方法三：
/*
解决思路:
与解决办法一有点相似但却有点不太相似.
相似点:同样是增加若干个对应的闭包域空间用来存储下标
不同点:解决办法一是在新增的匿名闭包空间内完成事件的绑定,而此例是将事件绑定在新增的匿名函数返回的函数上 此时绑定的函数中的 function scope 中的 closure 对象的 引用 arg 是指向将其返回的匿名函数的私有变量 arg
*/
for(var i = 0; i<arr.length;i++){
arr[i].onclick = (function(arg){
return function () {
alert(arg);
}
})(i);
}
方法4：
/*
解决思路与解决办法一相同
*/
for(var i = 0; i<arr.length;i++){
(function(){
var temp = i;
arr[i].onclick = function () {
alert(temp);
}
})();
}
方法5：
/*
解决思路与解决办法三及四相同
*/
for(var i = 0;i<arr.length;i++){
arr[i].onclick = (function () {
var temp = i;
return function () {
alert(temp);
}
})();
}
方法6：
/*
解决思路:
将下标添加为绑定函数的属性
*/
for(var i = 0;i<arr.length;i++){
(arr[i].onclick = function () {
alert(arguments.callee.i); //arguments 参数对象 arguments.callee 参数对象所属函数
}).i = i;
}
方法7：
/*
解决思路:
通过 new 使用 Function 的构造函数 创建 Function 实例实现,由于传入的函数体的内容是字符串,故 Function 得到的是一个字符串拷贝,而没有得到 i 的引用(这里是先获取 i.toString()然后与前后字符串拼接成一个新的字符串,Function 对其进行反向解析成 JS 代码)
*/
for(var i = 0;i<arr.length;i++){
arr[i].onclick = new Function("alert("+i+");");//每 new 一个 Function 得到一个 Function 对象(一个函数),有自己的闭包域
}
方法8：
/*
解决思路:
直接通过 Function 返回一个函数
与解决办法七的不同之处在于:
解决办法七使用 new,使用了 new,此时 Function 函数就被当成构造器可以用来构造一个 Function 实例返回
当前解决办法没有使用 new ,即将 Function 函数当成一个函数,传入参数返回一个新函数;
其实此处 new 与不 new 只是的区别在于:
使用了 new 即 Function 函数充当构造器,由 JS 解析器生产一个新的对象,构造器内的 this 指向该新对象;
不实用 new 即 Function 函数依旧是函数,由函数内部自己生产一个实例返回.
*/
for(var i = 0;i<arr.length;i++){
arr[i].onclick = Function("alert("+i+");");
}
方法9：
<script type="application/javascript">
"use strict";//使用严格模式,否则报错 SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
var arr = document.getElementsByTagName("p");
for(var i = 0;i<arr.length;i++){
let j = i;//创建一个块级变量
arr[i].onclick = function () {
alert(j);
}
}
</script>
原文：https://segmentfault.com/a/1190000003818163?_ea=385256#articleHeader0
javascript解决for循环中i取值的问题（转载）的更多相关文章
- react中map循环中key取值问题
数组中没有唯一的key,可以定义变量,拼接字符串连接. let i = 0; key={`infoItem-col-${i++}`}
- 关于PreferenceActivity的使用和一些问题的解决(自己定义Title和取值)
android的Setting往往用PreferenceActivity来写的 我们在建立layout文件: <PreferenceScreen xmlns:android="http ...
- 也谈解决Combobox绑定数据后取值出现System.Data.DataRowView的问题
刚才遇到一个怪现象:同一个窗口,同一张表,通过第一个Combobox值的改变,动态绑定第二个Combobox,结果出现一个怪现象,第一个Combobox有的值改变第二个Combobox一切正常,有几个 ...
- Javascript - IE8下parseInt()方法的取值异常
公司的测试小妹妹跑来对我说,下拉框第9项始终无法正确提交的时候,我还以为见鬼了. parseInt()会把'0'开头的数字以8进制来解析,当有大于7的数字时候就按10进制来解析. // p ...
- 一秒钟解决mysql使用游标出现取值乱码问题
drop procedure if exists pro_test; delimiter // create procedure pro_test() begin declare str varcha ...
- Python：高级主题之（属性取值和赋值过程、属性描述符、装饰器）
Python:高级主题之(属性取值和赋值过程.属性描述符.装饰器) 背景 学习了Javascript才知道原来属性的取值和赋值操作访问的“位置”可能不同.还有词法作用域这个东西,这也是我学习任何一门语 ...
- 关于模板中的动态取值 ---反射与javascript脚本编译
在项目中经常遇到一个问题,打印word或者打印excel的时候,我们经常使用一对一的赋值或者批量替换的方式来对模板进行修改. 但是现在遇到两种场景: 1.取值是通过自定以方法进行取值的. 如:一个销售 ...
- 如何解决流程开发中SheetRadioButtonList页面取值问题
分享一个常见的取值问题. 应用场景: SheetRadioButtonList控件,点击其中一项执行事件操作.如果是页面加载的情况下,值就无法取到. 具体原因如下: 我给SheetRadioButto ...
- JavaScript笔记——this的取值
有关ECMAScript定义如何获取this请移步ECMAScript中关于如何获取this的定义 绝大多数情况下,函数的调用方式决定了this的取值 全局上下文 console.log(this = ...
随机推荐
- iOS项目名称、版本号与屏幕分辨率
iOS的版本号,一个叫做Version,一个叫做Build,这两个值都可以在Xcode 中选中target,点击“Summary”后看到. Version在plist文件中的key是“CFBundle ...
- [Jquery] 操作html 不常用元素方法大全
除http://www.w3school.com.cn/jquery/jquery_selectors.asp上的以外该大全应都有. 第一章 input控件篇 1.操作select 下拉框 1.1 获 ...
- 读书笔记_Effective_C++_条款二十二：将成员变量声明为private
1.格式统一 在调用的时候,不会去想有没有(),一律是有get(),或者set()之类的. 2.封装 能直接访问得越少,表明封装性越高, 封装性越高,我们的顾虑就少了, 例如:我们a.data*0.9 ...
- Implement Insert and Delete of Tri-nay Tree
问题 Implement insert and delete in a tri-nary tree. A tri-nary tree is much like a binary tree but wi ...
- 在预装win8的电脑上换win7系统讲解
现在买电脑,如果电脑预装的系统是win8系统,那么这个电脑的默认启动模式应该就是UEFI模式,现在UEFI模式正在逐渐取代传统模式.UEFI启动需要一个独立的分区,它将系统启动文件和操作系统本身隔离, ...
- 驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接
由于项目中必须得用JDK6来作为Java环境,于是连接SQLServer时出现了com.microsoft.sqlserver.jdbc.SQLServerException: 驱动程序无法通过使用安 ...
- 不管肉鸡，还是代理，CC识别就封杀！
这几天的心得,汇成代码. PYTHON版,我编的. #!/usr/bin/env python # -*- coding: utf-8 -*- import os,sys,time import co ...
- Qt编程之对QGraphicsItem点击右键弹出菜单
就是对这个contextMenuEvent 事件重新实现,在这个事件函数中创建菜单,大概就是这样. void MyItem::contextMenuEvent(QGraphicsSceneContex ...
- UNIX网络编程--IPV4 IPV6 ICMPV4 ICMPV6
一.IPV4首部 IP层提东无连接不可靠的数据报递送服务.它会尽力把IP数据报递送到指定的目的地,然而并不保证他们一定到达,也不保证他们的到达顺序与发送顺序一致,还不保证每个IP数据报只到达一次.任何 ...
- Linux Top使用说明
运行top后,按P键就按CPU排序,按M键就按内存排序 P – 以 CPU 占用率大小的顺序排列进程列表 M – 以内存占用率大小的顺序排列进程列表 在系统维护的过程中,随时可能有需要查看 CPU 使 ...