JS进阶之闭包详解

最新推荐文章于 2024-11-08 14:35:14 发布

PeaceCode

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量411

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_50238437/article/details/125940519

版权

本文深入探讨了JavaScript中函数参数为null和undefined的区别，特别是在函数内部的处理方式。同时，文章详细解释了闭包的概念，展示了闭包在处理按钮点击事件、函数作为返回值和参数传递等场景下的应用。还讨论了闭包的原理、作用、生命周期以及优缺点，强调了其在实现模块化和内存管理中的角色。

摘要由CSDN通过智能技术生成

文章目录

补充:函数的实参为null的undefined的区别

function foo(arg1 = arg2, arg2) {
    console.log(arg1)
    console.log(arg2)
}

foo(undefined, 'qiaozhi')  // 报错：Cannot access 'arg2' before initialization

function foo(arg1 = arg2, arg2) {
    console.log(arg1) // 输出：null
    console.log(arg2) // 输出: qiaozhi
}

foo(null, 'qiaozhi')

当传递null的时候，会直接接收null作为实参

闭包的理解

函数嵌套函数时，内层函数引用了外层函数作用域下的变量，并且内层函数在全局环境下可访问，并且需要在全局环境下使用内层函数，进而形成了闭包

闭包应用案例之点击按钮

下面的方式会出现bug

<body>
    <button>测试一</button>
    <button>测试二</button>
    <button>测试三</button>
</body>
<script>
    // 需求：点击某个按钮，提示 点击第n个按钮
    var btns = document.getElementsByTagName('button')
    // 有问题
    for (var i = 0; i < btns.length; i++) {
        var btn = btns[i]
        btn.onclick = function () {
            alert('第' + (i) + '个')
        }
    }
</script>

解决方案一：解决一：保存下标

for (let i = 0; i < btns.length; i++) {
    var btn = btns[i]    // btn是个对象
    btn.index = i
    btn.onclick = function () {
        alert('第' + this.index + "个")
    }
}

解决方案二：利用闭包

  for (let i = 0; i < btns.length; i++) {
        (function (i) {
            var btn = btns[i]
            btn.onclick = function () {
                alert('第' + i + "个")
            }
        })(i)
    }

常见的闭包

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

function fun() {
    var a = 10

    function fun2() {
        a++
        console.log(a)
    }
    return fun2
}
var fun2 = fun();
fun2(); // 一调用会打印出 11
fun2(); // 一调用会打印出 12，证明了利用闭包【实现让函数外部可以操作（读写）到函数内部的数据（变量/函数）】
fun2 = null //此时闭包对象死亡
// 自己打断点玩玩 会发现：Closure (fun) 即闭包 跟内部函数fun2有关
// 补充：fun执行完后，变量对象就会被销毁，但是作用域还是在的

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

function showMsgDelay(msg, time) {
    setTimeout(function () {
        console.log(msg)
    }, time)
}
showMsgDelay('hello', 1000)

使用闭包实现私有方法操作独立的私有属性

闭包的原理

我们知道正常情况下外界是无法访问函数内部变量的，函数执行完之后，上下文即被销毁
但是在函数中，如果我们返回另一个函数，且该返回的函数使用了外层函数中的变量
那么外界就可以通过这个返回的函数获取原外层函数中的变量

闭包的应用

1.利用闭包实现“模块化”
2.redux源码的中间件实现机制

闭包的作用

1.延长外部函数变量对象的生命周期
2.让函数外部间接地操作（读写）到函数内部的数据（变量/函数）
3.注意：浏览器为了性能后期将外部函数中不被内部函数使用的变量清除了

闭包的生命周期

1.产生：内部的函数定义之后就立即产生闭包
2.死亡：内部函数成为垃圾对象时

闭包的优缺点

优点：延长外部函数变量对象的生命周期
缺点：延长外部函数变量对象的生命周期（会占用内存，如果不及时清除容易造成内存溢出，泄露）

PeaceCode

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫