通过取父级for循环的i来理解闭包,iife,匿名函数

在使用for循环的时候,假如需要在循环体中添加一个匿名函数处理其他的事情,那么,在这个匿名函数内,如果需要用到对应的i,因为闭包的缘故,循环体循环结束后才返回i,所以i最终为最后一次++的数值。

闭包即函数有权访问另一函数的局部变量,常用方法为在函数内部创建另一个需要引用这个函数内部变量的函数。

解决方式1

通过匿名函数传参,因为匿名函数取得参数是每次for循环里的i,所以每次打印的值为0,1,2,......

匿名函数自我执行的方法是,在函数体外套一对圆括号,形成一个表达式,在圆括号后再加另一个圆括号,里面可传参数。此方法即IIFE,又叫立即执行函数表达式。

写到这里,还需要说一下函数声明和函数表达式的区别:

1.函数声明必须有标识符,即函数名;

2.函数声明存在变量提升;

3.函数声明不能出现在循环,判断、try、with等语句的代码块中;

解决方式2

此方法和上述方法有异曲同工之妙,也是在匿名函数体外部取到了循环体中的i;

在JS中,每一个函数被调用的时候都会创建一个执行上下文,在该函数内部定义的变量和函数只能在该函数内部被使用,正是因为这个上下文,使得我们在调用函数的时候能创建一些私有变量。

为什么a()()两次打印都是1,是因为每次执行a()()的时候都给a重新赋值1,而b()/c()执行的只是a return出来的匿名函数;

为什么报错?

因为在javascript解析代码时,当遇到function关键字时,会默认把它当作一个函数声明,而不是函数表达式,如果没有显示的表达成函数表达式,就报错。因为函数声明需要一个函数名,而上面的代码中函数没有函数名。(在执行到第一个左括号时报错)

为什么在加了函数名之后,依然报错?

在一个表达式后面加上括号表示立即执行,而在一个语句后加上括号,该括号和之前的语句完全不搭边,而只是一个分组操作符,用来控制运算中的优先级,当js解析到括号时,发现里面为空,所以报错。(在执行到第二个右括号时报错)

因为在js中括号内部不能为语句,所以js解析到括号时,紧接着发现了function关键字,所以自动把括号内的语句当作表达式而不是函数声明。

所以,立即执行函数,你可以这么写:

而上面我们用立即执行函数加闭包,取到了循环体中的i;可见合理利用立即执行函数加上闭包,还能保存变量的状态。

在模块化中,也可以用立即执行函数来处理模块化,可以减少全局变量造成的空间污染,构造更多的私有变量。

时间: 2024-11-04 14:14:06

通过取父级for循环的i来理解闭包,iife,匿名函数的相关文章

Jquery-获取父级元素parent

1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div"><a id="href_fir" href="#">href_fir</a> <a id="href_sec" href="#">href_sec</a> <a id="href_thr" href="#&quo

Handlebars.js循环中索引(@index)使用技巧(访问父级索引)

使用Handlebars.js过程中,难免会使用循环,比如构造数据表格.而使用循环,又经常会用到索引,也就是获取当前循环到第几次了,一般会以这个为序号显示在页面上. Handlebars.js中获取循环索引很简单,只需在循环中使用{{@index}}即可. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <META http-equiv=Content-Type content="text/html; charset=utf-

JS 用window.open()函数,父级页面如何取到子级页面的返回值?

父窗口:<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script> <script type=&quo

JsRender实用教程(tag else使用、循环嵌套访问父级数据)

前言: 正在做angularJs的分页功能时,发现了JsRender这个插件,园子里的大神多,查到一个用JsRender实现的分页demo,地址是这个 http://www.cnblogs.com/sword-successful/p/4759027.html#3379766 查了一下相关的基本资料 下面是引自http://www.ziliao1.com/article/show/0c5ac83aeac0a1fc6af388817c52b6c0.html JsRender是一款基于jQuery的

深入理解定位父级offsetParent及偏移大小offsetTop / offsetLeft / offsetHeight / offsetWidth

深入理解定位父级offsetParent及偏移大小 [转载] 前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWidth这四个属性.当然,还有一个偏移参照——定位父级offsetParent.本文将详细介绍该部分内容 定位父级 在理解偏移大小之前,首先要理解offsetParent.人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级

js对元素属性.内容的操作。定时器。元素的平级,父级,子集关系。

JS对元素内容的操作: 1.操作样式(style) 2.操作属性(Attribute) 3.操作内容(innerHtml/Text) 一.操作元素属性 常见属性:class.id.style.disabled. 自定义属性:可以自定义一个任意属性名称,可以任意放值,不会对所在元素本身有任何作用. this:代表所在最近的一个方法. 设置一个属性:a.setAttribute("属性名称","属性值");[不存在该属性名称时,创建这个属性,并赋值.当存在该属性名称时,

Jquery 父级元素、同级元素、子元素

prev():获取指定元素的上一个同级元素(是上一个哦). prevAll():获取指定元素的前边所有的同级元素. find():查找子元素方式 next(): 获取指定元素的下一个同级元素(注意是下一个同级元素哦) closest(): 查找父级元素(第一个如:<p class='a'> <a class='a'><b class='c'></b></a> </p>) $(".c")closest(".

2017-3-31 js对元素属性.内容的操作。定时器。元素的平级,父级,子集关系。

JS对元素内容的操作: 1.操作样式(style) 2.操作属性(Attribute) 3.操作内容(innerHtml/Text) 一.操作元素属性 常见属性:class.id.style.disabled. 自定义属性:可以自定义一个任意属性名称,可以任意放值,不会对所在元素本身有任何作用. this:代表所在最近的一个方法. 设置一个属性:a.setAttribute("属性名称","属性值");[不存在该属性名称时,创建这个属性,并赋值.当存在该属性名称时,

定位父级offsetParent及偏移大小

偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWidth这四个属性.当然,还有一个偏移参照--定位父级offsetParent.本文将详细介绍该部分内容 定位父级 在理解偏移大小之前,首先要理解offsetParent.人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级,很大原因是offsetParent与定位有关 定位父级offsetPa