javascript 关于for循环里面的闭包问题
时间:2017-09-22
今天写了一个简单实用javascript例子,该例子主要是通过循环来输出一组数字,例子的特点是在for循环里面定义匿名函数,这些匿名函数的功能是输出当前的数值,然后我们在使用另一个for循环来调用这些函数并执行他们从而达到输出数值的目的。
今天写了一个简单实用javascript例子,该例子主要是通过循环来输出一组数字,例子的特点是在for循环里面定义一个函数数组,这些函数的功能是输出当前的数值,然后我们在使用另一个for循环来调用这些函数并执行他们从而达到输出数值的目的。具体代码如下:
var funcs = [];
//循环里面包含闭包函数
for (var i = 0; i < 3; i++) { // let's create 3 functions
funcs[i] = function() { // and store them in funcs
console.log("My value: " + i); // each should log its value.
};
}
for (var j = 0; j < 3; j++) {
funcs[j](); // and now let's run each one to see
}
输出结果为:
My value:3
My value:3
My value:3
而我想要输出:
My value:0
My value:1
My value:2
这个基本问题的解决方法是什么?
首先我们先了解一下javascript的闭包。
什么是闭包? 各种专业文献上的"闭包"(closure)定义非常抽象,很难看懂。我的理解是,闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
for (var i = 0; i < 3; i++) { // let's create 3 functions
funcs[i] = function() { // and store them in funcs
console.log("My value: " + i); // each should log its value.
};
}
由于闭包的关系,他是循环完毕之后才返回,最终结果是2++是5, 这个匿名函数里面根本没有i这个变量,所以匿名函数会从父级函数中去找i,当找到这个i的时候,for循环已经循环完毕了,所以最终会返回3.
解决方法:
你要做的是将每个函数中的变量绑定到函数之外单独的不变的值:
var funcs = [];
function createfunc(i) {
return function() { console.log("My value: " + i); };
}
for (var i = 0; i < 3; i++) {
funcs[i] = createfunc(i);
}
for (var j = 0; j < 3; j++) {
funcs[j](); // and now let's run each one to see
}
运行结果:
My value:0
My value:1
My value:2
- ADO.NET Entity Framework CodeFirst 如何输出日志(EF 5.0)
- 仿火车出票效果
- ASP.NET SignalR HubPipelineModule
- 微信ANDROID客户端-会话速度提升70%的背后
- Vue.js前后端同构方案之准备篇—代码优化
- 仿今日头条滑动评论效果
- Android新一代多渠道打包神器
- 应用IBatisNet+Castle进行项目的开发
- 从0实现一个延迟代理服务
- Mono 把 .NET 应用程序移植到 Linux
- gulp源码解析(一)—— Stream详解
- android开关按钮
- vuejs+ts+webpack2框架的项目实践
- ssh框架搭建
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法