🌞 深入剖析 JavaScript 闭包

🌞 深入剖析 JavaScript 闭包

💎导读目录

  • 什么是闭包
  • 闭包的特性
  • 闭包的优缺点
  • 闭包的作用
  • 闭包的注意点

💎什么是闭包?

一个函数和对其周围状态的引用捆绑在一起,这样的组合就是闭包.

通俗的说: 一个内层函数可以访问外层函数的作用域 就叫 闭包。

在 JavaScript 中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。

闭包的形成与变量的作用域以及变量的生存周期密切相关。

💎闭包的特性

  1. 函数嵌套函数
  2. 函数内部可以引用外部的参数和变量
  3. 参数和变量不会被垃圾回收机制回收

💎闭包的优缺点

优点:

可以设计私有的方法和变量

缺点

常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。

一般函数执行完毕后,局部活动对象就被销毁,内存中仅仅保存全局作用域。

💎关于 变量

变量的作用域

变量的作用域: 变量的有效范围。

在实际开发中,我们经常遇到的是 函数中声明的变量作用域。

var a = '闭包';

function getValue(){
    var a = '函数局部作用域'
    console.log(a)
}

getValue()  //函数局部作用域
当在全局声明了一个同名变量,在函数内部也声明了一个同名变量,函数优先访问函数作用域中的变量。

函数作用域

函数作用域: 在函数内部可以访问到函数外部变量,而在函数外部的变量不可以访问函数内部的变量。

为什么呢?

因为当在函数中搜索一个变量的时候,如果函数内部没有这个变量的声明,那么它会随着代码的执行环境创建的作用域往外层逐层搜索,直到搜索到全局变量为止。

变量的搜索是从内到外搜索的。

function getData() {
    var str = "闭包练习";
    var fun = function(){
        var innerStr = '内部变量'
    }
    console.log(innerStr) 
     //innerStr is not defined 函数外层是访问不到 函数内层变量的
}
getData()

变量的生存周期

对于 全局变量,它的生存周期是永久的的,除非主动销毁变量。

而对于 函数局部变量 ,当函数执行完毕,局部变量也就销毁了。

栗子 1
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>

    <script>
        var nodes = document.getElementsByTagName('div')
        for (var i = 0; i < nodes.length; i++) {
                nodes[i].onclick = function () {
                    alert(i)
                }
        }
    </script>
</body>

</html>

给每个 div 增加点击事件,当点击 div 时,弹出它对应的索引值。

现在无论点击哪个 div ,它 弹出的 都是 4 。

为什么呢?

因为 div 点击事件 是被 异步触发的,当事件被触发的时候,循环已经执行完,此时的 i 的 变量值 为 4。

如何解决 点击每个div 弹出对应的i 值呢 ?

可以借用 闭包, 把每次循环的 i 保存起来,当执行点击事件时,它会从内到外 搜索变量的作用域,它会优先搜索到 闭包环境环境的 i

 # 闭包解决办法   
<script>
        var nodes = document.getElementsByTagName('div')
        for (var i = 0; i < nodes.length; i++) {
            (function(i) {
                nodes[i].onclick = function () {
                    alert(i)
                }
            })(i)
        }
 </script>
栗子 2
var num = 1;
function getValue(){
    var num = 0;
    return function(){
        num++
        console.log(num)
    }
}

var s = getValue()
s()
s()
// 1 2 

按常理思路来: 函数执行完毕,num = 1 销毁,变为初始值 num = 0 ,变量在函数中作用域从内到外逐层搜索。

前面也说到了,当函数执行完,局部变量也跟着销毁了,那为什么会 输出 2 呢 ?

这里 涉及到 垃圾回收机制引用计数问题

[关于垃圾回收]  https://blog.csdn.net/zhouziy...

简述:

当声明了一个变量并将一个引用类型值赋给该变量时,则该值的引用次数就是1;如果同一个值又被赋给另一个变量,则该值的引用次数加1;如果包含对该值引用的变量又取得了另外一个值,则该值的引用次数减1。当该值的引用次数变为0时,则可以回收其占用的内存空间。当垃圾回收器下一次运行时,就会释放那些引用次数为0的值所占用的内存。

解答

第一次执行 s() 时,num = 1

第二次 执行 s() 时, 由于 引用的时第一次 s () 的变量num=1,num 没有被销毁,固然在 num = 1 的基础上 再 加 1 。


注意

如果没有使用同样引用的话,那么多次调用,都是同样的值,因为没有记录引用值。

函数在执行完毕,num = 1 被销毁掉了,初始为 0

var num = 1;
function getValue(){
    var num = 0;
    return function(){
        num++
        console.log(num)
    }
}

getValue()()
getValue()()
// 0 0

💎闭包的作用

闭包的注意作用为这两项:

  1. 可以读取函数内部的变量
  2. 可以变量的值始终保持在内存中

栗子

function f2(){
    let num = 0;
    addNum = function(){
        num++
    }
    function f3(){
        console.log(num)
    }
    return f3
}

var a = f2()
a()
addNum()
a()
// 0  1 

结果为 0 1

函数在执行完毕,局部变量也跟着销毁, 结果 不应该是 0 0 吗 ?

其实a() 相当于 是 f3() 的闭包函数,它被执行了两次。

  • 第一次 执行 a() 时, 结果为 0 , 很好理解。
  • 第二次 执行的 f2() 函数内部的 addNum 函数,发现没这个匿名函数赋值给一个变量,而且这个变量没加 var / let , 那么它此时的作用域为 全局 ,保存在内存当中。执行 addNum 时它访问的 f2() 函数内部的局部变量 num , 此时, addNum 的存在依赖于 f2,因此f2 也在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。
  • 第三此 执行 a() 时, 因为 num 已存在内存中,而至值为1

最终输出结果: 0 , 1

​

💎闭包注意

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

Vue开发实践
本专栏更新前端开发实践,分享大前端技术。 微信公众号: 前端自学社区 个人微信: daxin261
909 声望
7k 粉丝
0 条评论
推荐阅读
2022 年终总结: 躺平的一年
本来今年不打算写年终总结了,今年一年没怎么输入输出,收获的也不多,感觉没啥可写的。回顾了一下之前的年终总结,今年是我写 年终总结 的 第五年了,得坚持下去,只有复盘记录,才知道这一年有什么精彩的瞬间和...

程序员海军赞 3阅读 985评论 1

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木赞 150阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青赞 55阅读 7.8k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy赞 46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木赞 66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs赞 39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木赞 44阅读 7.4k评论 6

909 声望
7k 粉丝
宣传栏