闭包问题(JAVASCRIPT面试篇)

2019-05-3116:43:23后端程序开发Comments2,709 views字数 628阅读模式

function A() {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

let n = 3文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

B = function () {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

(n)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

A()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

B()文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

很多人对于闭包的解释可能是函数里面嵌套了一个函数。然后返回一个函数。其实这个解释是不完整的。我怕上面的例子就可以反驳这个观点文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

其实在JS之中,闭包存在的意义就是让我们可以间接访问函数内部的变量。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

经典面试题:循环使用闭包解决var定义的函数的问题文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

for (var i = 1; i <= 5; i++) { setTimeout(function timer() { (i) }, i * 1000) }文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

首先因为setTimeout是个异步函数,所以会先把循环全部执行完毕,这时候i就是6了,所以会输出5个6;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

其实解决这个方法一共有3种,是哪三种呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

(1)我们可以通过使用闭包的方式来解决文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

for(var i=1;i<=5;i++){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

;(function(j){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

setTimeout(function timer(){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

(j)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

},j*1000)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

})(i)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

在上面的代码里,我们首先使用了立即执行函数将i传入函数内部,这个时候值就被固定在了参数j上面不会改变,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

(2)我们可以通过settimeout的第三个参数timer来解决文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

for(var i=1;i<=5;i++){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

setTimeout(function timer(j){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

(j)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

},i*1000,i)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

(3)我们最提倡的也是用的最多的就是用let来替代var文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

for(let i=1;i<=5;i++){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

setTimeout(function(){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

(i)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

},i*1000)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/13243.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/bc/13243.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定