闭包的理解

最新推荐文章于 2025-05-23 20:42:37 发布

DreamTaoJC

最新推荐文章于 2025-05-23 20:42:37 发布

阅读量89

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_44202669/article/details/128551860

版权

什么是闭包？

以下代码就是一个闭包，实现函数调用一次，a减一的功能

f1函数被存进了变量fm,他是全局变量,不会被垃圾回收机制回收,
下次再调用fm()的时候a的值在内存中保存,所以每次都是在原有的基础上减一

闭包需要满足四个条件：

1.有函数嵌套（函数f2嵌套在函数f1中）

2.内部函数引用外部作用域的变量参数（函数f2引用了外部作用域的变量a）

3.返回值是函数（函数f1返回的是函数f2）

4.创建一个对象函数，让其长期驻留（fm就是创建的一个对象函数）

闭包总结：闭包就是直接调用函数里面的函数，这样变量声明可以在外函数内部，第一次向上找到变量，第二次变量已经缓存在内函数，不用继续找。
如何实现呢？内函数作为外函数的返回值，再将外函数赋值给一个变量，再使用这个变量调用，这样就是直接调用的内函数而没有经过外函数。

闭包的使用场景

闭包通常用来创建内部变量，使得这些变量不能被外部随意修改，同时又可以通过指定的函数接口来操作。例如 setTimeout 传参、回调、IIFE(立即调用函数表达式)、函数防抖、节流、柯里化、模块化等等

setTimeout 传参

//原生的setTimeout传递的第一个函数不能带参数 
setTimeout(function(param){
    alert(param)
},1000)

//通过闭包可以实现传参效果
function myfunc(param){
    return function(){
        alert(param)
    }
}
var f1 = myfunc(1);
setTimeout(f1,1000);

回调

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>test</title>
    <link rel="stylesheet" href="">
</head>
<style>
    body{
        font-size: 24px;
    }
    h1{
        font-size: 1.5rem;
    }
    h2{
        font-size: 1.2rem;
    }
</style>
<body>

    <p>测试</p>

    <a href="#" id="color-blue">蓝色</a>
    <a href="#" id="color-red">红色</a>
    <a href="#" id="color-green">绿色</a>

<script>
    function changeSize(color){
        return function(){
            document.body.style.color = color;
        };
    }

    var blue = changeSize("blue");
    var red = changeSize("red");
    var green = changeSize("green");

    document.getElementById('color-blue').onclick = blue;
    document.getElementById('color-red').onclick = red;
    document.getElementById('color-green').onclick = green;
</script>
</body>
</html>