JavaScript闭包的使用案例

最新推荐文章于 2024-07-09 19:02:21 发布

圈点Studio

最新推荐文章于 2024-07-09 19:02:21 发布

阅读量247

点赞数

分类专栏： JavaScript html js 文章标签： js javascript html 闭包

本文链接：https://blog.csdn.net/Cml_l/article/details/119450897

版权

闭包 JavaScript 前端开发变量作用域内存管理

关键词由CSDN通过智能技术生成

JavaScript 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

17 篇文章 0 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

闭包在我们平时的前端编程中使用，使用好了可以利用，使用不好了则会导致内存溢出

文章目录

目标

使用闭包的变量性质定义一个变量，不会影响作者的使用，也不会被其他地方的定义影响。

JavaScript

function clickFn(){
    var counts=0;
    var obj={
        click:function(){
            counts++;
        },
        getcounts:function(){
            return counts;
        }
    }
    return obj;
}

html

<!DOCTYPE html>
<!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>
    <script src="./37闭包实例.js"></script>
    <style>
        body{
            background: rgb(248,248,250);
        }
        div[name=闭包]{
            width: 100%;
            height: 200px;
            border: 1px solid #531d86;
            border-radius: 5px;
            text-align: center;
            line-height: 200px;
            background-color: aliceblue;
        }
        div button{
            width: 8em;
            cursor: pointer;
            padding: 5px;

        }
    </style>
</head>
<body>
    <div name="闭包">闭包的一个实例，变量不影响其他，也不被其他影响</div>
    <div style="display: flex;justify-content: center;gap: 30px;margin-top: 30px;">
    <button>点击</button>
    <button>获取点击次数</button>
    <button>点击2</button>
    <button>获取点击次数2</button>
    </div>
    <script>
        // 函数里我们虽然定义了变量counts，但是不会影响全局的，也不好被全局的影响
        var myclick=clickFn();
        var myclick2=clickFn();
        // 我在这里还是可以定义counts；
        var counts=100;
        document.querySelector("button").addEventListener("click",function(){
            document.querySelector("div").innerHTML="点击成功"+(myclick.getcounts()+1);
            myclick.click();
        })
        document.querySelectorAll("button")[1].addEventListener("click",function(){
            document.querySelector("div").innerHTML=myclick.getcounts();
        })
        document.querySelectorAll("button")[2].addEventListener("click",function(){
            document.querySelector("div").innerHTML="点击成功"+(myclick2.getcounts()+1);
            myclick2.click();
        })
        document.querySelectorAll("button")[3].addEventListener("click",function(){
            document.querySelector("div").innerHTML=myclick2.getcounts();
        })
    </script>
</body>
</html>

操作截图

在这里插入图片描述

圈点Studio

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript闭包的使用案例

闭包在我们平时的前端编程中使用，使用好了可以利用，使用不好了则会导致内存溢出文章目录JavaScripthtml操作截图###目标使用闭包的变量性质定义一个变量，不会影响作者的使用，也不会被其他地方的定义影响。JavaScriptfunction clickFn(){ var counts=0; var obj={ click:function(){ counts++; }, getcounts:funct.
复制链接

扫一扫