• 闭包


    1|0一、作用域

    • JavaScript作用域:分为全局作用域、局部作用域。变量在某个范围内起作用和效果,目的是为了提高程序的可靠性和减少命名冲突。

    • 变量的作用域:根据作用域的不同我们变量分为全局变量和局部变量。两种变量其主要区别是函数内部可以直接读取全局变量,但是在函数外部无法读取函数内部的局部变量。

    • 作用域链:

      • 根据内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称为作用域链

      • 只要是代码,就至少有一个作用域。

      • 写在函数内部的局部作用域。

      • 如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域。

    1|11.全局变量
    • 概念:在全局作用域下的变量,在全局下都可以使用。
    • 如果在函数内部没有声明直接赋值的变量也属于全局变量。
    • 只有浏览器关闭的时,全局变量才会销毁,比较占内存资源。
      • 全局作用域:整个script标签中,或者是一个单独的js文件。
    1|22.局部变量
    • 在局部作用域下变量,即在函数内部的变量就是局部变量,只能在函数内部使用。
    • 函数的形参也可以看做是局部变量。
    • 当我们程序执行完毕时,局部变量就会销毁,比较节约内存资源。
      • 局部作用域(函数作用域):在函数内部就是局部作用域,这个代码的名字(变量)只在函数内部起作用和效果。

    2|0二、理解闭包

    2|11.闭包的概念
    • 闭包是指有权访问另外一个函数作用域中的局部变量的函数。声明在一个函数中的函数,叫做闭包函数。而且内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回(寿命终结)了之后。
    2|22.闭包的特点
    • 让外部访问函数内部变量成为可能。
    • 局部变量会常驻在内存中。
    • 可以避免使用全局变量,防止全局变量污染。
    • 会造成内存泄漏(有一块内存空间被长期占用,而不被释放)。
    2|33.闭包的分析
    • 闭包就是可以创建一个独立的环境,每个闭包里面的环境都是独立的,并且互不干扰。
    • 闭包会发生内存泄漏,每次外部函数执行的时候,外部函数的引用地址不同,都会重新创建一个新的地址。
    • 但当外部函数运行结束甚至销毁时,局部的变量key=value,尽管key被垃圾回收机制给回收了,但是value仍不会被回收,会变成一个自由变量留下引用的指针。
    2|44.闭包的实现案例
    • 利用闭包的方式,输出点击项的索引值

      <ul class="closure"> <li>苹果li> <li>香蕉li> <li>橘子li> <li>西瓜li> ul> <script> // 获取所有的li元素 let lis = document.querySelectorAll('.closure li') // 利用for循环创建了4个立即执行函数 for (let i = 0; i < lis.length; i++) { (function (i) { lis[i].addEventListener('click', function () { console.log(i) }) })(i) } script>
    • 利用闭包的方式,3秒钟之后,打印所有li元素的内容

      <ul class="closure"> <li>苹果li> <li>香蕉li> <li>橘子li> <li>西瓜li> ul> <script> // 获取所有的li元素 let lis = document.querySelectorAll('.closure li') for (let i = 0; i < lis.length; i++) { (function (i) { setTimeout(() => { console.log(lis[i].innerHTML) }, 3000) })(i) } script>

    __EOF__

    本文作者宇宙终极无敌超级爆炸究极飞天帅比暴龙战士的博客
    本文链接https://www.cnblogs.com/P1Kaj1uu/p/16898478.html
    关于博主:评论和私信会在第一时间回复。或者直接私信我。
    版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
    声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
  • 相关阅读:
    LeetCode 41. 缺失的第一个正数
    微信聚合聊天系统的便捷功能:自动回复
    Leetcode—53.最大子数组和【中等】
    WPF动画
    vue双向绑定/小程序双向绑定?
    2023 ICPC 网络赛Ⅱ DIM 现场 code | JorbanS
    基于核心素养初中数学概念课设计策略研究课题开题报告
    原生js计时器和时钟
    【网络编程】IO多路复用
    JVM内存管理模型(初步)
  • 原文地址:https://www.cnblogs.com/P1Kaj1uu/p/16898478.html