JavaScript闭包案例

最新推荐文章于 2024-03-09 09:00:00 发布

原创最新推荐文章于 2024-03-09 09:00:00 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

36 篇文章

订阅专栏

本文通过两个实例介绍JavaScript中闭包的应用：一是利用闭包生成数组元素；二是利用闭包进行DOM元素事件处理，实现鼠标悬停改变背景颜色的效果。

1、闭包生成数组元素

<script type="text/javascript">
    //创建数组元素
    var arr = new Array();
    for(var i = 0; i < 4; i++){
        arr[i] = f1(i);
    }
    function f1(n) {
        function f2() {
            console.log(n);
        }
        return f2;
    }
    arr[2]();
    arr[0]();
    arr[3]();
    arr[1]();
</script>

效果图：

2、闭包事件的操作

<script type="text/javascript">
    window.onload = function () {
        var colors = document.getElementsByTagName('li');
        for(var i = 0; i < 3; i++){
            colors[i].onmouseover = over(i);
            colors[i].onmouseout = out(i);
        }
        //闭包机制
        function over(n) {
            function f2() {
                colors[n].style.backgroundColor = "pink";
            }
            return f2;
        }
        function out(n) {
            function f2() {
                colors[n].style.backgroundColor = "";
            }
            return f2;
        }
    }
</script>

效果图：