打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
web前端面试题JS篇之闭包

  JS中关于闭包的相关知识。如果你想参加web前面工作,那么JS几乎是每场面试都会被问到的问题,接下来我们就一起来看一下。

:请讲一下你对闭包的认识

什么是闭包

答:

能够读取其他函数内部变量的函数。

稍全面的回答:

在js中变量的作用域属于函数作用域, 在函数执行完后,作用域就会被清理,内存也会随之被回收,但是由于闭包函数是建立在函数内部的子函数, 由于其可访问上级作用域,即使上级函数执行完, 作用域也不会随之销毁, 这时的子函数(也就是闭包),便拥有了访问上级作用域中变量的权限,即使上级函数执行完后作用域内的值也不会被销毁。

这里涉及到对函数作用域的认识: js变量分为全局变量和局部变量;函数内部可以直接读取全局变量,而在函数外部自然无法读取函数内的局部变量

闭包解决了什么问题

1. 可以读取函数内部的变量

2. 让这些变量的值始终保持在内存中。不会在函数调用后被清除

可以通过下面的代码来帮助理解上面所说的:

function addCounter() { let counter = 0 const myFunction = function () { counter = counter + 1 return counter } return myFunction } const increment = addCounter() const c1 = increment() const c2 = increment() const c3 = increment() console.log('increment:', c1, c2, c3); // increment: 1 2 3

在这段代码中increment实际上就是闭包函数myFunction, 它一共运行了三次,第一次的值是1,第二次的值是2,第三次的值是3。这证明了,函数addCounter中的局部变量counter一直保存在内存中,并没有在addCounter调用后被自动清除。

闭包的应用场景

在开发中, 其实我们随处可见闭包的身影, 大部分前端JavaScript 代码都是“事件驱动”的,即一个事件绑定的回调方法; 发送ajax请求成功|失败的回调;setTimeout的延时回调;或者一个函数内部返回另一个匿名函数,这些都是闭包的应用。

下面是具体应用的例子:

1. 取正确值问题

for (var i = 0; i < 10; i++) { setTimeout(function () { console.log(i) //10个10 }, 1000) }

怎么取到每一次循环的正确值呢? 闭包这样用:

for (var i = 0; i < 10; i++) { ((j) => { setTimeout(function () { console.log(j) //1-10 }, 1000) })(i) }

声明了10个自执行函数,保存当时的值到内部

2.使用闭包模拟私有变量

私有变量在java里使用private声明就可以了, 但是在js中还没有,但是我们可以使用闭包模拟实现。

var counter = (function () { var privateCounter = 0; function changeBy(val) { privateCounter += val } return { increment: function () { changeBy(1) }, decrement: function () { changeBy(-1) }, value: function () { return privateCounter } } })(); counter.value() //0 counter.increment() //1 counter.increment() //2 counter.decrement() //1

匿名函数已经定义就立即执行, 创建出一个词法环境包含counter.increment、counter.decrement、counter.value三个方法,还包含了两个私有项:privateCounter变量和changeBy函数。这两个私有项无法在匿名函数外部直接访问,必须通过匿名包装器返回的对象的三个公共函数访问。

闭包的缺点

1. 由于闭包会是的函数中的变量都被保存到内存中,滥用闭包很容易造成内存消耗过大,导致网页性能问题。解决方法是在退出函数之前,将不再使用的局部变量全部删除。

2. 闭包可以使得函数内部的值可以在函数外部进行修改。所有,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
JS中作用域和变量提升(hoisting)的深入理解
TS 变量声明
70道关于JavaScript的常见面试题解答
深入解读ES6系列(一)
搞懂JavaScript引擎运行原理
在Javascript中闭包(Closure)
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服