JavaScript闭包-闭包定义与应用

简介: 一、闭包定义一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。(1)作为一个函数变量的一个引用,当函数返回时,其处于激活状态。

一、闭包定义

一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

(1)作为一个函数变量的一个引用,当函数返回时,其处于激活状态。

(2)一个闭包就是当一个函数返回时,一个没有释放资源的栈区。

二、闭包应用

看了闭包的定义,也许您还觉得云里雾里,下面我们通过一个示例子闭包的应用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript闭包</title>
</head>
<body>

<script type="text/javascript">   
    function init() {   
        var arrays = document.getElementsByTagName("p");   
        for( var i=1; i<=arrays.length; i++ ) {   
            arrays[i].onclick = function() {   
                alert(i);   
            }   
        }   
    }   
</script>   
</head>   
<body onload="init();">   
    <p>产品一</p>
    <p>产品二</p>
    <p>产品三</p>
    <p>产品四</p>
    <p>产品五</p>
</body>
</html>

上述代码,运行效果是,不管点击任何一个P元素,输出的结果都是5。
如何实现点击产品一 输出1、点击产品二 输出2、点击产品三 输出3 以此类推?

方案1 将变量保存在每个P元素对象上

function init() {   
    var arrays = document.getElementsByTagName("p");   
    for( var i=1; i<=arrays.length; i++ ) {   
        arrays[i-1].i = i;   
        arrays[i-1].onclick = function() {   
            alert(this.i);   
        }
    }   
}  

方案2 使用闭包,以参数的方式传递

function init() {   
    var arrays = document.getElementsByTagName("p");   
    for( var i=1; i<=arrays.length; i++ ) {   
        (function(arg){     
            arrays[i-1].onclick = function() {     
                alert(arg);   
            };   
        })(i);
    }   
}   

方案3 使用闭包,返回一个函数作为响应事件(与方案2有细微差别)

function init() {   
    var arrays = document.getElementsByTagName("p");   
    for( var i=1; i<=arrays.length; i++ ) {   
        (function(arg){     
            arrays[i-1].onclick = function() {     
                return function(){
                    alert(arg)
                };   
            };   
        })(i);
    }   
}

方案4 使用闭包,以调用时局部变量

function init() {   
    var arrays = document.getElementsByTagName("p");   
    for( var i=1; i<=arrays.length; i++ ) {   
        (function(){   
            var temp = i;  
            arrays[i-1].onclick = function() {     
                alert(temp);   
            };   
        })();
    }   
} 

方案5 使用匿名函数保存在函数自身

function init() {   
    var arrays = document.getElementsByTagName("p");   
    for( var i=1; i<=arrays.length; i++ ){
        (arrays[i-1].onclick = function() {   
            //arguments.callee 表示函数对象自身的引用
            alert(arguments.callee.i);   
        }).i = i;   
    }   
}

方案6 使用Function实现,实际上是产生一个闭包

function init() {   
    var arrays = document.getElementsByTagName("p");   
    for( var i=1; i<=arrays.length; i++ ) {   
        arrays[i-1].onclick = new Function("alert(" + i + ");");
    }   
}

方案7 使用Function (与6有细微差别一个new 一个没)

function init() {   
    var arrays = document.getElementsByTagName("p");   
    for( var i=1; i<=arrays.length; i++ ) {   
        arrays[i-1].onclick = Function("alert(" + i + ");");
    }   
}
相关文章
|
JavaScript 前端开发
如何减少Node.js应用中的全局变量?
如何减少Node.js应用中的全局变量?
717 165
|
11月前
|
存储 监控 JavaScript
基于布隆过滤器的 Node.js 算法在局域网电脑桌面监控设备快速校验中的应用研究
本文探讨了布隆过滤器在局域网电脑桌面监控中的应用,分析其高效空间利用率、快速查询性能及动态扩容优势,并设计了基于MAC地址的校验模型,提供Node.js实现代码,适用于设备准入控制与重复数据过滤场景。
361 0
|
10月前
|
运维 监控 JavaScript
基于 Node.js 图结构的局域网设备拓扑分析算法在局域网内监控软件中的应用研究
本文探讨图结构在局域网监控系统中的应用,通过Node.js实现设备拓扑建模、路径分析与故障定位,提升网络可视化、可追溯性与运维效率,结合模拟实验验证其高效性与准确性。
520 3
|
前端开发 搜索推荐 JavaScript
如何通过DIY.JS快速构建出一个DIY手机壳、T恤的应用?
DIY.JS 是一款基于原生 Canvas 的业务级图形库,专注于商品定制的图形交互功能,帮助开发者轻松实现个性化设计。适用于 T 恤、手机壳等多种商品场景。它自带丰富功能,无需从零构建,快速集成到项目中。通过创建舞台、添加模型、定义 DIY 区域和添加素材四个步骤即可完成基础用法。支持在线演示体验,文档详细,易上手。
711 57
|
11月前
|
资源调度 负载均衡 JavaScript
使用PM2工具部署Vue.js应用于服务器
以上步骤完成之后,你就成功利⽤ PM⼆工具将 Vuejs 应⽰程序部署至服 务 器,并且配合反向代理实现了高效稳定访问及负载均衡功能。
572 0
|
监控 算法 JavaScript
公司局域网管理视域下 Node.js 图算法的深度应用研究:拓扑结构建模与流量优化策略探析
本文探讨了图论算法在公司局域网管理中的应用,针对设备互联复杂、流量调度低效及安全监控困难等问题,提出基于图论的解决方案。通过节点与边建模局域网拓扑结构,利用DFS/BFS实现设备快速发现,Dijkstra算法优化流量路径,社区检测算法识别安全风险。结合WorkWin软件实例,展示了算法在设备管理、流量调度与安全监控中的价值,为智能化局域网管理提供了理论与实践指导。
364 3
|
存储 JavaScript 前端开发
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~