es6是如何通过let解决闭包的?

var ary=[];
for(var i=0;i<10;i++){
ary[i]=function(){
console.log(i)
}
}
ary6;
上述代码执行后毫无疑问是10,es6之前解决闭包问题的办法通常是这样的:
var ary=[];
for(var i=0;i<10;i++){
(function(j){
//隐式执行var j=i;
ary[j]=function(){
console.log(j)
}
})(j);

                }
        ary[6]();
        现在通过立即执行函数,让函数ary[0]~ary[9]的作用域链首位都是一个匿名函数作用域,
        所以ary[6]会找它作用域链首位的j,所以结果是6,那么下面的代码怎么理解呢?

                    var ary=[];
                    for(let i=0;i<10;i++){
                        ary[i]=function(){
                            console.log(i);
                        }
                    }
                    ary[6]();
        结果也是6,感到很费解,ary[6]执行时会沿着作用域链一级一级向上找,但函数体内
        没有声明i,所在的块级作用域(循环体)也没有声明i,只有‘for(let i=0;i<10;i++)’
        这里声明了i,那么ary[6]只能在这个作用域下找到I,可是这个i不是10吗?

        这个问题困扰我好久了 ,哪位大神给出满意解答我会提高悬赏哦

1个回答

用(function(j){})会产生函数级的作用域。
而用 let 声明的就是块作用域,和函数级的作用域一样都可以用于形成闭包。
在for中使用let声明块作用域变量时,ie11与其它浏览器有些不同。
其实在一个for语句中有两层块作用域,我称之为“for语句块作用域(外层)”和“循环体块作用域(内层)”。循环变量就是在for语句块作用域(外层)中的。
非ie11中,每次循环都会产生一个新的for语句块作用域(外层)。在其内创建一个新的i变量,并且这个新的i变量还会复制上一循环for语句块作用域内的i变量的值,并在这基础上进行i++。
当你for中有创建函数ary[i]=function(){}时,就会与每次循环产生的for语句块作用域形成闭包,从而保留了每个循环的i变量。

而在ie11中,for语句块作用域(外层)却是在整个循环过程中只会创建一个,而循环体块作用域(内层)才是每次循环都会产生一个新的。
所以ie11中需要在循环体块作用域中创建变量才行

                    for(let i=0;i<10;i++){
                        let k=i;
                        ary[i]=function(){
                            console.log(k);
                        }
                    }
jslang
天际的海浪 回复qq_40086260: ie11已经支持let等少部分es6的语法了,只不过在一些细节方面还是与标准有区别
一年多之前 回复
qq_40086260
qq_40086260 ie11不是需要经过babel编译后将es6转为es5才能运行吗?
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
es6 let [a, b, c] = [1, 2, 3]为啥报错?

var [a, b, c] = [1, 2, 3]为啥不报错,不是说用let完全代替var吗,这样看的话,有些场景let并不能代替var啊

ES6 let作用域问题求助

for (let i = 0; i < 10; i++) { console.log(i); let i = '内部'; console.log(i); } A.html:3 Uncaught ReferenceError: i is not defined at A.html:3 刚接触JS不久,请问为什么第一个log会报错呢,我理解的是他会读到0 - 9.求过路大神指教,谢谢!

es6 for循环在webpack环境只循环一次

在webpack安装es6运行环境,执行下面代码 ![图片说明](https://img-ask.csdn.net/upload/201901/16/1547650835_149283.png) 如上图for执行了一次 使用let声明只在各自作用域有效,上面的for循环应该是执行4次,于是我直接在浏览器敲代码 ![图片说明](https://img-ask.csdn.net/upload/201901/16/1547651013_7378.png) a打印了四次,证明了我期望的结果,我不知道为什么同样的代码结果却不一样,求大佬解答 顺便贴上es6的运行环境 [地址](https://github.com/cucygh/es6-webpack "") ps:我猜是不是环境是将es6转换成es5,也就是将let变成了var,才导致的结果,那如果这样,以后我用es6写循环,不很坑,瑟瑟发抖,该怎么用es6写循环呀

关于ES6的for of循环遍历DOM的问题

我写了个小DEMO熟悉for of循环遍历DOM,却发现一些问题并不知道怎么解决。代码如下面。 js代码如下: var DOM1 = document.getElementsByTagName("li"); console.log(DOM1); for (let d of DOM1) { console.log("执行"); console.log(d); } HTML中相关代码如下: <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> 控制台输出如下:![图片说明](https://img-ask.csdn.net/upload/201707/29/1501296737_207784.png) 这说明li都获取到了啊,但就是for循环中的不执行,请指点为什么。 (浏览器是支持ES6的)

ES6 proxy如何拦截并获取对象内部方法

最近在学习es6的相关知识,刚好看到proxy部分。我根据示例写一段拦截能够正常运行。但是想要在这个基础上做一些修改就出现了问提。我想要拦截某个对象的内部方法,获取传入的参数后做一些修改。但是发现拦截成功后,没有办法获取到参数。目前还没有找到原因 ``` let target = { name: 'I am the target', say(name) { return name; }, } let handler = { get: function(target, prop, bindthis, e){ if(target[prop] && target[prop] instanceof Function){ return this.apply(prop, target, ...arguments) }else{ return target[prop] } }, apply: function (fnName, ctx, args) { //这里我本来想要获取到后面调用时传入的 132 但是args参数传入的是调用的上下文对象。 console.log(args) if(fnName == 'say'){ ctx.name = 'I had changed' } return ctx[fnName]; } }; let p = new Proxy(target, handler); console.log(p.say('132')) ``` 我想要通过apply拦截我调用时传入的132,但是实际打印出来发现args是调用的target对象。请问是我哪里使用错误么?

ES6和CommonJS有什么区别???

ES6和CommonJS有什么区别???我知道的是导入时形式不同 // ES6 import MyModule from './modules/MyModule.js'; // CommonJS var MyModule = require('./modules/MyModule.js'); 其他呢??

关于ES6解构赋值的问题

![图片说明](https://img-ask.csdn.net/upload/201808/23/1535011935_543010.png) 本人对ES6解构赋值了解的不是很深入,请问上面这段ES6解构如何理解,可以写的详细一点的解释吗?

es6 copywidthin的问题

let a = { 3:1, length:5 }; [].copyWithin.call(a,0,3); console.log(a); //Object {0: 1, 3: 1, length: 5} let a = { 2:1, length:5 }; [].copyWithin.call(a,0,2); console.log(a); //Object {0: 1, length: 5} 在上面两个例子中,call()的第二个参数控制从a的第几项开始替换数据,第三项控制从a的第几项开始读取数据, 那么在第二个例子为什么不是Object{0:1,2:1,length:5}

ES6导入重复?

<div class="post-text" itemprop="text"> <p>Im trying to keep my code (sever and client side) as modular as possible and this requires a lot of importing and exporting, however I have an unanswered question.</p> <p>I tried to search from here, I read topical blog posts and even watched few YT videos but it's still not fully explained. I would love to avoid making this mistake right now and avoid rewriting my logic later.</p> <hr> <p><strong>File1</strong></p> <pre><code>import React from 'react'; // do something </code></pre> <p><strong>File2</strong></p> <pre><code>import React from 'react'; // do something else </code></pre> <p><strong>File3</strong></p> <pre><code>import File1 from './file1'; import File2 from './file2'; // do something with both </code></pre> <hr> <ul> <li>Is it smart enough? Can I import same module as much as I want and it imports it only once?</li> <li>What if I need to <code>import React</code> to <strong>File3</strong> too? Is it still smart enough to handle this situation? </li> </ul> <p>Im using Node, Babel and Webpack.</p> </div>

请问如何实现低版本谷歌浏览器对es6语法的支持啊 网上的package.json的方式没看懂,有没有简单的啊

请问如何实现低版本谷歌浏览器对es6语法的支持啊 网上的package.json的方式没看懂,有没有简单的啊

大神们谁会用es6遍历这样的树状结构啊

``` var root = [{ name:'D盘', children:[{ name:'学习', children:[ { name:'电子书', children:[ { name:'文学', children:[ { name:'茶馆' }, { name:'红与黑' } ] } ] } ] }, { name:'电影', children:[ { name:'美国电影' }, { name:'日本电影' } ] } ] } ``` 大神们谁会用es6遍历这样的树状结构啊 用es5可以这样, 但是es6就行不通了 ``` function getMenuName(menus) { var name = ""; for (var i = 0; i < menus.length; i++) { menus[i].label = menus[i].name; menus[i].value = menus[i].id; (function(data) { console.log('遍历') var m = arguments[0]; for (var j = 0; j < m.length; j++) { console.log(m[i].name); m[i].label = m[i].name if( m[j].children != null && m[j].children.length > 0) { arguments.callee(m[j].children); //递归匿名方法 } } })(menus[i].children); } } ```

ES6新属性at()报at函数未定义

源码: console.log('abc'.at(0) ); 在谷歌浏览器中运行报错,at是一个未定义的函数,而charAt ES5可以,是es6不支持吗?

用es6写链表数据结构看不懂

用es5写链表我能看得懂,但是es6写法我就看的很懵了 ![图片说明](https://img-ask.csdn.net/upload/201805/22/1526978140_433304.png) 第1行立即执行函数和第10行为什么重名? 为什么141行要用立即执行函数? 为什么最后要return,return的是个什么东西? 为什么第8,9行要用weakmap,直接写const length = 0;const head = null不好吗 第12行this指的是什么?

webpack 如何不转译 es6 es7 代码 ?

webpack 即使不使用 babel-loader 也会转译 es6 到 es5, 如何使它不对 es6 es7 代码进行转译?

eclipse的JSHint插件对于ES6的支持问题

在配置中设置 "esnext" : true,或者 "esversion" : 6 之后还是无法识别ES6语法,请问各位该怎么设置呢,感谢! ![图片说明](https://img-ask.csdn.net/upload/201702/28/1488272716_9382.png)

es6环境搭建中遇到了问题

$ gulp --watch [09:29:11] Requiring external module babel-register C:\Users\jinxin\Desktop\es6\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:328 throw e; ^ Error: Couldn't find preset "es2015" relative to directory "C:\\Users\\jinxin\\Desktop\\es6" at C:\Users\jinxin\Desktop\es6\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:293:19 at Array.map (<anonymous>) at OptionManager.resolvePresets (C:\Users\jinxin\Desktop\es6\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:275:20) at OptionManager.mergePresets (C:\Users\jinxin\Desktop\es6\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:264:10) at OptionManager.mergeOptions (C:\Users\jinxin\Desktop\es6\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:249:14) at OptionManager.init (C:\Users\jinxin\Desktop\es6\node_modules\_babel-core@6.26.0@babel-core\lib\transformation\file\options\option-manager.js:368:12) at compile (C:\Users\jinxin\Desktop\es6\node_modules\_babel-register@6.26.0@babel-register\lib\node.js:103:45) at loader (C:\Users\jinxin\Desktop\es6\node_modules\_babel-register@6.26.0@babel-register\lib\node.js:144:14) at Object.require.extensions.(anonymous function) [as .js] (C:\Users\jinxin\Desktop\es6\node_modules\_babel-register@6.26.0@babel-register\lib\node.js:154:7) at Module.load (module.js:507:32)

关于ES6解构赋值我有不理解的地方

``` //绑定元素 Img.prototype._bind = function() { console.log('classfied',this.classified) console.log('all',this.all) console.log('this.figures',this.figures) methods.$('.__Img__classify' , this.wrap).addEventListener('click',(e) =>{ if(e.target.nodeName !== 'LI') return; console.log("Img.prototype._bind -> target", e.target) const type = e.target.innerText const els = this._getImgsByType(type) let prevImgs = this.figures.map(figure =>methods.$('img',figure).src) //找出当前每个fugure中包含的图片的src console.log("Img.prototype._bind -> prevImgs", prevImgs) let nextImgs = els.map(figure => methods.$('img',figure).src) const diffArr = this._diff(prevImgs,nextImgs) console.log('diffArr',diffArr) }) } ``` 这是老师教的ES6切换图片中绑定元素的实现方法,我不太理解的是第七行那个(e),现在是我自己改好的,也有相同的效果 老师原本的是这样的 ``` //绑定元素 Img.prototype._bind = function() { console.log('classfied',this.classified) console.log('all',this.all) console.log('this.figures',this.figures) methods.$('.__Img__classify' , this.wrap).addEventListener('click',({target}) =>{ if(target.nodeName !== 'LI') return; console.log("Img.prototype._bind -> target", target) const type = target.innerText const els = this._getImgsByType(type) let prevImgs = this.figures.map(figure =>methods.$('img',figure).src) //找出当前每个fugure中包含的图片的src console.log("Img.prototype._bind -> prevImgs", prevImgs) let nextImgs = els.map(figure => methods.$('img',figure).src) const diffArr = this._diff(prevImgs,nextImgs) console.log('diffArr',diffArr) }) } ``` 那里面的{target}是因为解构赋值才默认是e.target吗,箭头函数这样写解购赋值一定默认最初的参数是e吗,什么时候解构赋值用[]什么时候用{}啊,求教,有点晕

关于es6模板字符串的问题

当模板字符串作为标签模板传递给标签函数时,函数接受到的参数为(arr,...values),其中arr为模板字符串中不是变量部分的集合,那么为什么当原模板字符串中起始位置(或末尾)出现变量时,数组arr中会在对应的起始(或末尾)多出一个空元素?

一个ES6的笔试题目,求大神们帮忙看看~

``` function Example(name){ return this.name = name; } console.log([0,"0",[],{},null].map(i => typeof new Example(i).name)); ``` 我运行结果为:["number", "string", "undefined", "undefined", "object"] 为什么会有undefined的呐?

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

程序员请照顾好自己,周末病魔差点一套带走我。

程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

搜狗输入法也在挑战国人的智商!

故事总是一个接着一个到来...上周写完《鲁大师已经彻底沦为一款垃圾流氓软件!》这篇文章之后,鲁大师的市场工作人员就找到了我,希望把这篇文章删除掉。经过一番沟通我先把这篇文章从公号中删除了...

总结了 150 余个神奇网站,你不来瞅瞅吗?

原博客再更新,可能就没了,之后将持续更新本篇博客。

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

优雅的替换if-else语句

场景 日常开发,if-else语句写的不少吧??当逻辑分支非常多的时候,if-else套了一层又一层,虽然业务功能倒是实现了,但是看起来是真的很不优雅,尤其是对于我这种有强迫症的程序"猿",看到这么多if-else,脑袋瓜子就嗡嗡的,总想着解锁新姿势:干掉过多的if-else!!!本文将介绍三板斧手段: 优先判断条件,条件不满足的,逻辑及时中断返回; 采用策略模式+工厂模式; 结合注解,锦...

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

2020阿里全球数学大赛:3万名高手、4道题、2天2夜未交卷

阿里巴巴全球数学竞赛( Alibaba Global Mathematics Competition)由马云发起,由中国科学技术协会、阿里巴巴基金会、阿里巴巴达摩院共同举办。大赛不设报名门槛,全世界爱好数学的人都可参与,不论是否出身数学专业、是否投身数学研究。 2020年阿里巴巴达摩院邀请北京大学、剑桥大学、浙江大学等高校的顶尖数学教师组建了出题组。中科院院士、美国艺术与科学院院士、北京国际数学...

男生更看重女生的身材脸蛋,还是思想?

往往,我们看不进去大段大段的逻辑。深刻的哲理,往往短而精悍,一阵见血。问:产品经理挺漂亮的,有点心动,但不知道合不合得来。男生更看重女生的身材脸蛋,还是...

程序员为什么千万不要瞎努力?

本文作者用对比非常鲜明的两个开发团队的故事,讲解了敏捷开发之道 —— 如果你的团队缺乏统一标准的环境,那么即使勤劳努力,不仅会极其耗时而且成果甚微,使用...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试:第十六章:Java中级开发(16k)

HashMap底层实现原理,红黑树,B+树,B树的结构原理 Spring的AOP和IOC是什么?它们常见的使用场景有哪些?Spring事务,事务的属性,传播行为,数据库隔离级别 Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点 SpringCould组件有哪些,他们...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

《Oracle Java SE编程自学与面试指南》最佳学习路线图2020年最新版(进大厂必备)

正确选择比瞎努力更重要!

《Oracle Java SE编程自学与面试指南》最佳学习路线图(2020最新版)

正确选择比瞎努力更重要!

都前后端分离了,咱就别做页面跳转了!统统 JSON 交互

文章目录1. 无状态登录1.1 什么是有状态1.2 什么是无状态1.3 如何实现无状态1.4 各自优缺点2. 登录交互2.1 前后端分离的数据交互2.2 登录成功2.3 登录失败3. 未认证处理方案4. 注销登录 这是本系列的第四篇,有小伙伴找不到之前文章,松哥给大家列一个索引出来: 挖一个大坑,Spring Security 开搞! 松哥手把手带你入门 Spring Security,别再问密...

字节跳动面试官竟然问了我JDBC?

轻松等回家通知

面试官:你连SSO都不懂,就别来面试了

大厂竟然要考我SSO,卧槽。

阿里面试官让我用Zk(Zookeeper)实现分布式锁

他可能没想到,我当场手写出来了

终于,月薪过5万了!

来看几个问题想不想月薪超过5万?想不想进入公司架构组?想不想成为项目组的负责人?想不想成为spring的高手,超越99%的对手?那么本文内容是你必须要掌握的。本文主要详解bean的生命...

自从喜欢上了B站这12个UP主,我越来越觉得自己是个废柴了!

不怕告诉你,我自从喜欢上了这12个UP主,哔哩哔哩成为了我手机上最耗电的软件,几乎每天都会看,可是吧,看的越多,我就越觉得自己是个废柴,唉,老天不公啊,不信你看看…… 间接性踌躇满志,持续性混吃等死,都是因为你们……但是,自己的学习力在慢慢变强,这是不容忽视的,推荐给你们! 都说B站是个宝,可是有人不会挖啊,没事,今天咱挖好的送你一箩筐,首先啊,我在B站上最喜欢看这个家伙的视频了,为啥 ,咱撇...

代码注释如此沙雕,会玩还是你们程序员!

某站后端代码被“开源”,同时刷遍全网的,还有代码里的那些神注释。 我们这才知道,原来程序员个个都是段子手;这么多年来,我们也走过了他们的无数套路… 首先,产品经理,是永远永远吐槽不完的!网友的评论也非常扎心,说看这些代码就像在阅读程序员的日记,每一页都写满了对产品经理的恨。 然后,也要发出直击灵魂的质问:你是尊贵的付费大会员吗? 这不禁让人想起之前某音乐app的穷逼Vip,果然,穷逼在哪里都是...

立即提问
相关内容推荐