深入了解 JS(3)

91 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第7天,点击查看活动详情

前端最重要的三大基础(前端三剑客),HTML CSS JAVASCRIPT,学习前端必学的三门基础知识点。

特别是JavaScript,这个基础必须是要最扎实的,不管在哪个项目中,前端都不会离开他的,所以我们要打牢它的基础。学习完基础后JavaScript的深入学习也是必不可少的,这节开始讲一下闭包相关知识:

  • 闭包

同期回顾:

闭包

1. what

  • 官方解释为 一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

  • 一般情况下变量只能沿着的作用域链,逐级的传递和被访问,外部父级作用域不能访问同级作用域和该同级作用域内部子级作用域的变量

  • 闭包是JavaScript中,变量生命周期的特殊处理机制,也是作用域机制的特殊体现

  • 变量一般情况下,在它自身处在的作用域结束时就会被销毁,但是如果该变量被以返回值的形式或者被以返回值的形式返回的代码中包含该变量,那么该变量就不会被释放,外部其它作用域就能使用到该变量

看一下下面这段代码

function a(){
    let i=0;
    function b(){
      alert(++i);
    }
    
    return b;
}

const c = a();
c();
  • 函数b嵌套在函数a内部;函数a返回函数b。
  • 这样在执行完const c=a()后,变量c实际上是指向了函数b,再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包,为什么?因为函数a外的变量c引用了函数a内的函数b,就是说当函数a的内部函数b被函数a外的一个变量引用的时候,就创建了一个闭包。

image.png

  • 如何产生闭包?

    • 当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 就产生了闭包
  • 闭包到底是什么?

    • 使用chrome调试查看
    • 理解一: 闭包是嵌套的内部函数(绝大部分人)
    • 理解二: 包含被引用变量(函数)的对象(极少数人)
    • 注意: 闭包存在于嵌套的内部函数中
  • 产生闭包的条件?

    • 函数嵌套
    • 内部函数引用了外部函数的数据(变量/函数)
  • **常见的闭包 **

    • 将函数作为另一个函数的返回值
    • 将函数作为实参传递给另一个函数调用

2. 作用 & life cycle & 应用

  • 作用 &

    • 使用函数内部的变量在函数执行完后, 仍然存活在内存中(延长了局部变量的生命周期)
    • 让函数外部可以操作(读写)到函数内部的数据(变量/函数)
  • life cycle

    • 产生: 在嵌套内部函数定义执行完时就产生了(不是在调用)
    • 死亡: 在嵌套的内部函数成为垃圾对象时
  • 闭包的应用 : 定义JS模块

    • 具有特定功能的js文件
    • 将所有的数据和功能都封装在一个函数内部(私有的)
    • 向外暴露一个包信n个方法的对象或函数
    • 模块的使用者, 只需要通过模块暴露的对象调用方法来实现对应的功能

3. 缺点

  • 缺点

    • 函数执行完后, 函数内的局部变量没有释放, 占用内存时间会变长
    • 容易造成内存泄露
  • 解决

    • 能不用闭包就不用
    • 及时释放