JS闭包经典示例详解

本文给出了一个JS闭包的例子。分享给大家参考，如下：

我花了很多时间在书上看闭包的介绍，看了很多人写的关于闭包的博客，然后我觉得我理解了。

于是，下午在一个QQ群中，有人问了这个经典的收尾问题，如下图：

我告诉他读一下书中的结尾介绍。告诉他之后，我觉得应该自己写。反正用不了多少时间，写错也花了我很长时间。.

后来看了书，自己总结了一下，觉得这次应该懂了。下次我不明白，我可以跳楼..

分界线。

首先，让我们了解几个概念：

立即执行函数：形式为(function(){ })()；的一类函数；

闭包：闭包是可以访问另一个函数范围内的变量的函数。

范围链：当执行代码时，将创建变量对象的范围链.

我们再来看看这个问题。我又写了一篇。源代码如下：

！doctype html head metharset=' utf-8 ' title闭包经典示例详细说明—— huansky/title/head body div id=' TTT ' p 00000000000000/p br p 11111111111111/p br p 222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222for(var I=0；idom.length我){ dom[i]。onclick=function(){ console . log(I)；//3 };}/script/html首先，代码中的匿名函数没有变量I，所以它必须在全局环境中查找并找到I。

当for循环运行时，全局变量中的I变为3。这时候点击文本，就会调用它的绑定函数，函数运行的时候，你会发现你没有I，你会在全局环境中得到I。

所以，最终的结果是，无论你点击哪个文本，最终的结果都是3。

PS:感兴趣的朋友可以用网上的HTML/CSS/JavaScript代码来运行工具：http://tools.jb51.net/code/HtmlJsRun来测试一下上面的代码，看看运行效果。

那我们该怎么办？您可以使用立即执行函数来查看代码：

for(var I=0；idom.length我){ dom[i]。onclick=function(I){ return function(){ console . log(I)；};}(I)；}我们将参数I作为传递给立即函数，这样I的值就会传递给立即函数的局部变量I。立即执行函数将直接执行，但其活动不会被破坏，因为其中有一个匿名函数。执行后，局部变量I和全局变量I的连接被切断，即执行时，立即执行函数的局部变量I和传入变量I一样多，局部变量I仍然不会因为匿名函数的存在而消失。

这时，匿名函数的作用域链中有两个变量I作为回报。当点击文本时，它向上搜索I，它找到立即执行函数的局部变量I，所以它停止向上搜索，所以最终结果不会是全局变量I的值3。

有一个方法可以测试你是否真的理解了上面的内容。看看上面的变体，代码：

for(var I=0；idom.length我){ dom[i]。onclick=function(t){ return function(){ console . log(t)；//1 console . log(I)；//3 };}(I)；}其实匿名函数中的t在返回的是即时执行函数的局部变量I，而I指的是全局变量I，因为即时执行函数中没有变量I，所以我们只能继续向上搜索，然后找到全局变量I。

如果你看到这里，你还是不明白。原因有二：一是我表达的不够好，二是你没有完全理解上面提到的概念，应该继续阅读。

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、0103010

希望本文对JavaScript编程有所帮助。