javascript闭包的应用

最新推荐文章于 2025-03-30 22:36:21 发布

MMRS

最新推荐文章于 2025-03-30 22:36:21 发布

阅读量548

点赞数

分类专栏：深入js 文章标签： js 闭包

深入js 专栏收录该内容

35 篇文章

订阅专栏

本文通过一个小例子深入解析JavaScript闭包的概念及其在解决实际问题中的应用，展现了闭包如何优雅地克服语言的局限性。

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

在之前的日子里看了很多关于闭包的文章，不过自己没有用闭包做过什么大事，一直感觉javascript的闭包是个类似鸡肋的特性，不过通过编写一个通用js验证而引出的循环绑定事件的经历，让我完全改变了看法，感觉闭包是个十分优雅的设计，非常恰当的克服了javascript的弱点。
先来看个小例子：
<html>
<head></head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
<script>
var liArr = document.getElementsByTagName("li");
var liArrLength = liArr.length;
for (var i = 0; i < liArrLength; i++) {
liArr[i].onclick = function () {
alert(i.toString());
}
}
</script>
</html>
这里我为每个li绑定了onclick事件，那么事情是否如我们所愿呢？
答案是：无论你点击那个li，弹出框显示的都是4。
原因很简单，由于javascript是引用赋值，当事件绑定完成后i已经自增到4了。
那么我们如何通过闭包来解决问题呢？
<html>
<head></head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
<script>
var liArr = document.getElementsByTagName("li");
var liArrLength = liArr.length;
for (var i = 0; i < liArrLength; i++) {
(function () {
var local_i = i;
liArr[i].onclick = function () {
alert(local_i.toString());
}
})();
}
</script>
</html>
如果曾经看过javascript闭包的同学一定会恍然大悟，您也可以观此而至。
个人认为这是闭包一个很有用的应用也是典型的案例。
说了这么多什么是闭包呢？
”官方”的解释是：所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
这个解释很学术，不过说直白了也不是很难，就是闭包访问的外层资源不会被释放。那么什么是”变量也是该表达式的一部分“呢？
答：函数（表达式）可以访问到当时上下文环境的该变量。
只要对闭包有这个感性的认识理解上面的代码就没有任何障碍了。
首先在循环内声明了一个函数将i赋值给一个该函数变量local_i，随即又调用了这个函数。根据闭包的概念，local_i的值是当时上下文环境i的值。所以local_i不会随着i的自增而改变。