• 昼猫笔记 JavaScript -- 闭包


     

    本次主要内容是 闭包

    阅读时间: 3分钟

    记得点个赞支持支持我哦


    初步了解

    先看下代码,输出结果是多少?

     

    1 function fn1 () {
    2    var a = 2
    3    function fn2 () {
    4      console.log(a)
    5    }
    6 }
    7 fn1()

     

     


    如何产生闭包呢?

    当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 就产生了闭包


    那闭包到底是什么呢

    理解一: 闭包是嵌套的内部函数(绝大部分人) 
    理解二: 包含被引用变量(函数)的对象(极少数人)(倾向于第二种) 
    我们可以chrome调试来查看 

    产生闭包的条件

    1.函数嵌套 
    2.内部函数引用了外部函数的数据(变量/函数)


    常见的闭包

    一  将函数作为另一个函数的返回值

     1 function fn1() {
     2    var a = 2
     3    function fn2() {
     4        a++
     5        console.log(a)
     6    }
     7    return fn2
     8 }
     9 var f = fn1()
    10 f() // 3
    11 f() // 4

    1.请问该过程产生了几个闭包? 
    答: 共产生一个(产生条件是创建内部函数对象就会产生闭包)

    2.如果说我想再次产生一个闭包,该怎么做? 
    答: 再次创建一个外部函数

    二 将函数作为实参传递给另一个函数调用

     

    1 function showMsgDelay(msg, time) {
    2    setTimeout(function () {
    3        console.log(msg)  //如果将这行去掉就不会产生闭包
    4    }, time)
    5 }
    6 showMsgDelay('zhouMao', 1000)

     

     


    闭包作用

    1. 使用函数内部的变量在函数执行完后, 仍然存活在内存中(延长了局部变量的生命周期)

    2. 让函数外部可以操作(读写)到函数内部的数据(变量/函数)


    思考/总结

     1 function fn1() {
     2    var a = 2
     3    function fn2() {
     4        a++
     5        console.log(a)
     6    }
     7    function fn3() {
     8        a--
     9        console.log(a)
    10    }
    11    return fn3
    12 }
    13 var f = fn1()
    14 f() // 1
    15 f() // 0
    1. 函数执行完后, 函数内部声明的 局部变量var a )是否还存在? 
      答: 存在,因为它在闭包中,只有存在于闭包中的变量才 可能存在

    2.   fn2 是否存在 
      答: 不存在,因为没有人引用它,就会变成垃圾对象 

    3. 那  fn3 呢,是否存在? 
      答: 存在,是因为  var f = fn1() 导致的( 闭包没有消失的根本原因 ),当我  return fn3() 的时候,保存的是  fn3, 一旦返回后,fn3 不存在,但是fn3 不存在不代表函数对象变成垃圾对象,因为  var f = fn1() f 指向的是 fn3

    4. 在函数外部能直接访问函数内部的局部变量吗? 

      答案但是不能了,但是我们可以通过 闭包 这个技术让外部操作它

    希望大家多多支持我哦

      孔子东游记           公众号:  昼猫笔记


    昼猫笔记

  • 相关阅读:
    JS高阶---继承模式(原型链继承)
    一切皆数据,人生需学习
    操作系统升级
    看了跨年演讲后
    新的开始
    怎么做一名高薪前端工程师,必备哪些技术工具?
    web服务器 Nginx
    实用的软件架构方法
    购买网络自动化工具时应考虑的7个方面
    ES6 展开操作符的几个妙用
  • 原文地址:https://www.cnblogs.com/zhoumao/p/10059341.html
Copyright © 2020-2023  润新知