• 【深入理解javascript】闭包


    1、作用域

    javascript没有块级作用域”。所谓“块”,就是大括号“{}”中间的语句。例如if语句:

    再比如for语句:

    所以,我们在编写代码的时候,不要在“块”里面声明变量,要在代码的一开始就声明好了。以避免发生歧义。如:

    在声明变量时,全局代码要在代码前端声明,函数中要在函数体一开始就声明好。除了这两个地方,其他地方都不要出现变量声明。

    javascript除了全局作用域之外,只有函数可以创建作用域

    作用域最大的用处就是隔离变量,不同作用域下同名变量不会有冲突。

    2、作用域和执行上下文

    作用域只是一个“地盘”,一个抽象的概念,其中没有变量。要通过作用域对应的执行上下文环境来获取变量的值。同一个作用域下,不同的调用会产生不同的执行上下文环境,继而产生不同的变量的值。所以,作用域中变量的值是在执行过程中产生的确定的,而作用域却是在函数创建时就确定了

    所以,如果要查找一个作用域下某个变量的值,就需要找到这个作用域对应的执行上下文环境,再在其中寻找变量的值。

    3、从【自由变量】到【作用域链】

    在A作用域中使用的变量x,却没有在A作用域中声明(即在其他作用域中声明的),对于A作用域来说,x一个自由变量。如下图

    在调用函数时,函数中的变量取值要到创建这个函数的那个作用域中取值——创建”,而不是“调用”,切记切记!!!

    • 总结一下取自由变量时的这个“作用域链”过程:(假设a是自由量)(重点记住)

    第一步,现在当前作用域查找a,如果有则获取并结束。如果没有则继续;

    第二步,如果当前作用域是全局作用域,则证明a未定义,结束;否则继续;

    第三步,(不是全局作用域,那就是函数作用域)将创建该函数的作用域作为当前作用域;

    第四步,跳转到第一步。

    例如:在fn函数中,取自由变量x的值时,要到哪个作用域中取?——要到创建fn函数的那个作用域中取——无论fn函数将在哪里调用

    4、真正的主角登场了:闭包

    闭包的两种应用场景:函数作为返回值;函数作为参数传递!!!!!!!!

    第一,函数作为返回值

    如上代码,bar函数作为返回值,赋值给f1变量。执行f1(15)时,用到了fn作用域下的max变量的值。至于如何跨作用域取值,可以参考上一章。

    第二,函数作为参数被传递

    如上代码中,fn函数作为一个参数被传递进入另一个函数,赋值给f参数。执行f(15)时,max变量的取值是10,而不是100(因为fn创建作用域是全局作用域,而不是调用的匿名执行函数内)。

    • 带闭包的作用域和执行上下文的场景是:(最重要,一定要看明白)

    第一步,代码执行前生成全局上下文环境,并在执行时对其中的变量进行赋值。此时全局上下文环境是活动状态。

    第二步,执行第17行代码时,调用fn(),产生fn()执行上下文环境,压栈,并设置为活动状态。

    第三步,执行完第17行,fn()调用完成。按理说应该销毁掉fn()的执行上下文环境,但是这里不能这么做。注意,重点来了:因为执行fn()时,返回的是一个函数。函数的特别之处在于可以创建一个独立的作用域。而正巧合的是,返回的这个函数体中,还有一个自由变量max要引用fn作用域下的fn()上下文环境中的max。因此,这个max不能被销毁,销毁了之后bar函数中的max就找不到值了。

    因此,这里的fn()上下文环境不能被销毁,还依然存在与执行上下文栈中。

    ——即,执行到第18行时,全局上下文环境将变为活动状态,但是fn()上下文环境依然会在执行上下文栈中。另外,执行完第18行,全局上下文环境中的max被赋值为100。如下图:

    第四步,执行到第20行,执行f1(15),即执行bar(15),创建bar(15)上下文环境,并将其设置为活动状态。

    执行bar(15)时,max是自由变量,需要向创建bar函数的作用域中查找,找到了max的值为10。这个过程在作用域链一节已经讲过。

    这里的重点就在于,创建bar函数是在执行fn()时创建的。fn()早就执行结束了,但是fn()执行上下文环境还存在与栈中,因此bar(15)时,max可以查找到。如果fn()上下文环境销毁了,那么max就找不到了。

    使用闭包会增加内容开销,现在很明显了吧!

    第五步,执行完20行就是上下文环境的销毁过程

  • 相关阅读:
    一种可以避免数据迁移的分库分表scale-out扩容方式
    ZooKeeper快速搭建
    ZooKeeper典型应用场景一览
    基于 Quartz 开发企业级任务调度应用
    mac安装dart环境配置及中途的错误解决
    Android Studio3.3打包报错AAPT2 process unexpectedly exit. Error output:
    android在App应用内打开word、xls、pdf等office文档(基于腾讯tbs)
    android分渠道打包,监测日活量统计(基于友盟SDK)
    PHP环境搭建-Windows系统下PHP环境搭建
    使用bugly热更新时自定义升级弹窗的UI样式
  • 原文地址:https://www.cnblogs.com/hantalk/p/6645016.html
Copyright © 2020-2023  润新知