闭包,是开发中常见的问题了 ,最近文汇软件小编在开发一视频列表的时候遇到了这个问题接下来给大家分享一下。
那么什么是闭包呢?
接下来先看段代码:
video标签的个数是3个 ,所以b的值为3 ;循环内输出变量i的值为0,1,2这个没问题 ,在循环内给每个video注册监听事件 ,判断video标签的播放状态来进行接下来事件的处理。这里打印i的值,逻辑下这个值应该是0,1或者2.哪个标签在播放就输出哪个值。接下来我们打印一下:
结果跟想象中的不一样 ,不论播放哪个标签。打印的值都是3。那么这是为什么呢?
a[i]这个里面的i会跟着for循环语句一个一个的变,而它后面的函数体里面的i是不同时随着一起变的,不知道i为多少,只有当最后函数外面调用这个函数体时才会找这个语句里面i的值(console.log(i)调用了),而此时i已经变成了3(因为上面for循环执行到i = 2时i++,此时i = 2,但是i不满足判断条件,赋值语句不执行,但是i已经变成了3);这就是闭包!!!
那么如何解决这个问题?
js中没有会计作用域,所以循环内函数调用时调用的是全局作用域里的值,也就是3;但是在ES6中let实际是为js新增了块级作用域,那么我们改下代码:
接下来打印下结果:
我们可以看到 ,输出的结果是我们期望的,上述代码中for循环之后的{}是块级作用域,每次循环时候每个返回的函数引用的是其对应块作用域的变量。i的值在for循环的作用域之外也是获取不到的。
好了,今天文汇软件小编就给大家介绍这些 ,大家可以自己试验下哦 ,欢迎评论区留言讨论更多前端知识。
上一篇: 如何使用css中的vw和vh