javascript闭包问题详解

之前看到一段代码,很是不能理解,然后就查找资料并且找网络上得大牛请教,最后弄懂了这段代码,然后就拿出来总结一下。

1.挖坑

先来看一段代码:

var arrTest = [];
for (var i = 0; i < 3; i++) {
    //注意函数没有传参数进入函数体
    arrTest.push(function () {
        console.log(‘>>>‘ + i);
    })
}

//arrTest=[function(){console.log(‘>>>‘+i)}, function(){console.log(‘>>>‘+i)}, function(){console.log(‘>>>‘+i)}]

console.log(arrTest[0].toString());  //function(){console.log(‘>>>‘,+i)}
console.log(i);
console.log(‘-------------‘);
//长度可以使用l 简单的单词来代替,减小代码长度
for (var i = 0, arrLength = arrTest.length; i < arrLength; i++) {
    console.log(i);
    arrTest[i]();
}

//验证的i的值
console.log(‘i的值是‘ + i);     //i=3

console.log(‘end for‘);
for (var j = 0, arrLength = arrTest.length; j < arrLength; j++) {
    console.log(j);
    arrTest[j]();
}

arrTest = [function () { console.log(‘>>>‘ + i) }, function () { console.log(‘>>>‘ + i) }, function () { console.log(‘>>>‘ + i) }]

结果是这个样子的:

那怎么实现当遍历整个函数的时候打印出我们所希望的0,1,2这样的结果呢?

/*
对函数进行改造,当执行循环的时候,打印0,1,2
 */
var arrTest1 = [];
for (var i = 0; i < 3; i++) {
    //构造一个立即执行的函数将函数的返回结果添加入数组中
    (function(n) {
        arrTest1.push(function() {
            console.log(‘>>>‘ + n);
        });
    })(i);
}
console.log(arrTest1);
for (var i = 0, l = arrTest1.length; i < l; i++) {
    arrTest1[i]();
}

打印结果:

时间: 2024-10-09 15:28:49

javascript闭包问题详解的相关文章

代码示例:一些简单技巧优化JavaScript编译器工作详解,让你写出高性能运行的更快JavaScript代码

告诉你一些简单的技巧来优化JavaScript编译器工作,从而让你的JavaScript代码运行的更快.尤其是在你游戏中发现帧率下降或是当垃圾回收器有大量的工作要完成的时候. 单一同态: 当你定义了一个两个参数的函数,编译器会接受你的定义,如果函数参数的类型.个数或者返回值的类型改变编译器的工作会变得艰难.通常情况下,单一同态的数据结构和个数相同的参数会让你的程序会更好的工作. function example(a, b) { // 期望a,b都为数值类型 console.log(++a * +

python命名空间与闭包函数详解

python命名空间与闭包函数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本篇博客主要介绍的知识点如下: 1>.三元运算 2>.命名空间 3>.global与nonlocal 4>.函数即变量 5>.嵌套函数 6>.闭包函数 一.三元运算 1 #!/usr/bin/env python 2 #_*_coding:utf-8_*_ 3 #@author :yinzhengjie 4 #blog:http://www.cnblogs.com/yi

Javascript 严格模式详解

Javascript 严格模式详解 作者: 阮一峰 日期: 2013年1月14日 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode).顾名思义,这种模式使得Javascript在更严格的条件下运行. 设立"严格模式"的目的,主要有以下几个: - 消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为; - 消除代码运行的一些不安全之处,保证代码运行的安全: - 提高编译器效率,增加运行速度

我看朴灵评注阮一峰的《JavaScript 运行机制详解:再谈Event Loop》

阮一峰和朴灵对我来说都是大牛,他们俩的书我都买过,阮老师的译作<软件随想录>和朴灵的<深入浅出node.js>.这个事情已经过了4个月了,所以我拿来讲应该也没啥问题. 这件事情是这样的,阮一峰在自己的博客写了篇文章<JavaScript 运行机制详解:再谈Event Loop>,然后朴灵看见了,发现了很多问题,然后在印象笔记又写了篇文章<[朴灵评注]JavaScript 运行机制详解:再谈Event Loop>,由于印象笔记现在已经不能访问了(尼玛也太烂了)

JavaScript 运行机制详解

JavaScript 运行机制详解——转载: 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另

javascript工具--控制台详解(转自 阮一峰博客)

javascript工具--控制台详解(转自 阮一峰博客) 大神这篇博客是写在2011年,主要介绍 "Firefox" 浏览器插件 "Firebug" 的操作,如今主流浏览器对控制台都已经提供了很好的支持.我自己用的最多是谷歌的 "chrome" 浏览器,下面也用 "chrome" 浏览器来调试. 一.显示信息的命令 console.log();  //控制台输入 网页中不会输出 console.info();  //一般信息

JavaScript对象类型详解

JavaScript对象类型详解 JavaScrtip有六种数据类型,一种复杂的数据类型(引用类型),即Object对象类型,还有五种简单的数据类型(原始类型):Number.String.Boolean.Undefined和Null.其中,最核心的类型就是对象类型了.同时要注意,简单类型都是不可变的,而对象类型是可变的. 什么是对象 一个对象是一组简单数据类型(有时是引用数据类型)的无序列表,被存储为一系列的名-值对(name-value pairs).这个列表中的每一项被称为 属性(如果是函

javascript 操作cookies详解

javascript 操作cookies详解 这段操作cookies的方法我使用很久了,但是一直一来没遇到什么问题,今天在做一个在第一个页面保存了cookies,第二个页面获取或者第三个页面获取的功能中,发现了方法的局限性,比如,第一个页面路径为 http://xxxxx/cyb-car2016/h5OfficeWorker/index,第二个页面路径为 http://xxxxx/cyb-car2016/h5AlertController/index,其中除了域名是一样之外,还有一个命名空间不一

[转]JavaScript异步机制详解

原文: https://www.jianshu.com/p/4ea4ee713ead --------------------------------------------------------------------------- 学习JavaScript的时候了解到JavaScript是单线程的,刚开始很疑惑,单线程怎么处理网络请求.文件读写等耗时操作呢?效率岂不是会很低?随着对这方面内容的了解和深入,知道了其中的奥秘.本篇文章就主要讲解一下JavaScript怎么处理异步问题. 一.同