对JavaScript闭包的理解

最新推荐文章于 2025-08-19 08:41:01 发布

原创最新推荐文章于 2025-08-19 08:41:01 发布 · 319 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #闭包

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文通过实例详细解析了JavaScript闭包的概念与作用，包括如何利用闭包读取函数内部变量并保持变量值在内存中持久存在。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在一些技术群里还总是能够看到有人问闭包到底是个什么东西，网上有大量的文章都在阐述着闭包的定义用法，可还是没能让人都明白什么是闭包。今天我也来试着解释一下闭包。

闭包的定义
借用阮一峰老师的话“闭包”就是能够读取其他函数内部变量的函数。
闭包的作用
JavaScript闭包可以用在许多地方。它的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

ok，言归正传。先来看一个简单的闭包的例子

function fun(x) {
    var count = 2;
    return function (y) {
        alert(x + y + (++count));
    }
}
var foo = fun(2); // foo 现在就是一个闭包
foo(10);  //15

上面的脚本最终会alert 15，foo在定义的时候就将fun内的x值为2，在调用foo的时候count相对foo就是一个外部变量，foo(10)最终执行的可以理解为：

//x = 2;y=10;count=2;
function(10){
    alert(2 + 10 + (++2));
}

由于执行foo的时候改变了count的值，所以再次执行foo的时候count就等于3了。
还有一个经典的闭包

<html >     
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     
<title>闭包演示</title>       
</head>     
<body>  
<button>0</button>     
<button>1</button>     
<button>2</button>   
<button>3</button>  
<button>4</button>  

<script type="text/javascript">     
    var Arr = document.getElementsByTagName("button");     
    for( var i=0; i<Arr.length; i++ ) {     
        Arr[i].onclick = function() {     
            alert(i);     
        }     
     }         
</script>      
</body>     
</html>

当点击按钮的时候为什么不会对应输出01234而是全部都输出5呢？这个脚本执行的时候应该为：

Arr[0].onclick = function(){
    alert(i);
}
Arr[1].onclick = function(){
    alert(i);
}
……
Arr[4].onclick = function(){
    alert(i);
}
i=5;

当i=5时，for循环停止，所以最终打印出来的都是5。
解决办法：

<script type="text/javascript">     
    var Arr = document.getElementsByTagName("button");     
    for( var i=0; i<Arr.length; i++ ) { 
        （function(arg)
            Arr[i].onclick = function() {     
                alert(arg);     
            }    
        ）(i)    

     }         
</script>