闭包的深入浅出

1.什么是闭包?

        闭包就是能够读取其他函数内部变量的函数。换句话说:函数嵌套,内层函数就形成了闭包。
        闭包简单理解成"定义在一个函数内部的函数"
        本质上说一个函数就是一个闭包。

如何从执行上下文定义闭包呢?

        

分析执行步骤

1.代码在浏览器加载时,首先创建一个全局执行上下文并压入执行栈。1-9行,在全局执行上下文中创建一个变量f1,f1得到的是函数定义。

2.第10行,在全局执行上下文创建一个新变量f3,并调用f1函数将返回值传递给新变量f3。

3.第1行,调用f1函数,创建改函数的函数执行上下文。第2行,创建一个名为count的新变量,并为其赋值为0。

4.第3-6行,在f1函数的函数执行上下文中创建一个名为f2的新变量,变量的内容是另一个新函数的定义,如第4、5行的定义。并且创建一个闭包,将闭包视为函数定义的一部分,它包含了作用域中的变量,本例中的变量是值为0的count。这个count根据作用域链查找机制从而得到值0。

5.第7行,返回f2变量定义的内容,返回的内容包括了函数的定义和它的闭包,闭包中包含了创建函数时改函数作用域中的变量。删除f1函数的函数执行上下文,转移到下一个控制流即全局执行上下文。

6.第10行,在全局执行上下文中,将f1函数的返回值赋给f3。f1返回的是f2函数,该函数包括了f2的定义部分和它的闭包,闭包中包含了创建它时在作用域中的变量,这里是count,值为0。

7.第11行,声明一个新变量c1,它的值是一个函数,该函数包含了第4-5行的函数定义和一个带有变量的闭包,调用该函数。

8.创建一个新的函数执行上下文,并执行函数。第4行count+=1,查找count变量。查找变量的规则是先从闭包中检查是否有该变量,没有再从该函数执行上下文中查找,如果没有最后则从全局执行上下文中查找。本例中闭包中有该变量count,值为0,执行count+=1,count的值被设置为1。然后返回count的值以及带count值得闭包,闭包中count的值为1,count的值被返回给c1,c1=1。返回值后销毁该函数的函数执行上下文。

9.重复第7.第8步,得到的结果是c2=2,c3=3。

 2.闭包的特点?

        2.1、优点

                        (1)、可以让函数内部的变量超出它本身的作用域在外部使用。

                        (2)、闭包可以隔离作用域,不暴露私有成员的目的,减少了变量冲突的风险

                缺点:局部变量会常驻在内存中,严重情况下会造成内存泄漏

3.闭包常遇到的bug

变量污染(解决方案:立即执行函数)

 4.有关闭包的面试题

        你在开发中你是怎么用的闭包的?

        综合回答(这只是简洁的回答,大家可以根据情况进行补充说明)  :   

                首先:let const 模块化代替闭包解决变量污染问题。 但是:模块化编译后都是闭包语法。在 react 开发中,高阶组件,统一管理状态就是闭包。在 react 中高阶函数存在形式基本都是闭包。

5.闭包的使用     

一看外层函数执行几次,执行几次就形成几个独立的蛋。(蛋:形参,var变量 function引用 提升。)每个蛋里面都有。内部函数执行时候,一看执行哪个蛋里面的函数  、二看 在当前蛋中找变量

6、使用闭包的注意点
(1)、由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
(2)、闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

  • 5
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值