JS 学习笔记闭包小案例

最新推荐文章于 2024-08-28 12:49:49 发布

倪晓磊

最新推荐文章于 2024-08-28 12:49:49 发布

阅读量193

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/m0_37846579/article/details/80294584

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<style type="text/css">
    *{
        list-style:none;
    }
    ul{
        display:flex;
        flex-wrap:wrap;
    }
    li{
        width: 20%;
        text-align: center;

    }
    img{
        width: 90%;
        padding:5%;
        border:1px solid #ccc;
        border-radius:5px;

    }
</style>
<body>
<ul>
    <li><img src="http://www.nixiaolei.com/pizza/dist/pizza.jpg" alt=""><p><button>赞(1)</button></p></li>
    <li><img src="http://www.nixiaolei.com/pizza/dist/pizza.jpg" alt=""><p><button>赞(1)</button></p></li>
    <li><img src="http://www.nixiaolei.com/pizza/dist/pizza.jpg" alt=""><p><button>赞(1)</button></p></li>
    <li><img src="http://www.nixiaolei.com/pizza/dist/pizza.jpg" alt=""><p><button>赞(1)</button></p></li>
</ul>
</body>
<script type="text/javascript">
function my$(tagName){
    return document.getElementsByTagName(tagName);
}

var btnObjs=my$("button");


function bb(){
    var value=2;
    return function(){
        var target=event.target
        console.log(this)
        this.innerHTML="赞("+(value++)+")";
    }
}


for(var i=0;i<btnObjs.length;i++){
    btnObjs[i].οnclick=bb()
}


</script>
</html>

函数被返回后其中的value 并未被释放，所以累加

闭包后，作用域链会被延长

闭包的作用，缓存数据,是缺点也是优点