老师，我有疑惑

老师，这道题的代码，如何体现包闭特性，请详细分析下。 1，访问内部部变量 2，让变量的值保留在内存中。

<!DOCTYPE html>

<html>

<head>

<style>

li{

list-style: none;

float: left;

width: 100px;

margin-left: 30px;

background: #eee;

cursor: pointer;

text-align: center;

}

</style>

</head>

<body>

<ul>

<li>真的敢点我？</li>

</ul>

var li=document.getElementsByTagName("li");

for(var i=0,len=li.length;i<len;i++){

(function(a){

li[a].onclick=function(){

console.log(a)

}

})(i)

}

</script>

</body>

</html>

源自：JavaScript 面向对象 2-9 编程练习

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2019-01-17 18:09:40

1、如果把立即执行函数去掉，for循环给每一个li循环绑定了点击事件，当for循环执行完之后，i的值为3了。点击li元素的时候，需要使用i的值，会先从当前作用域中找，点击事件中并没有保存i值，所以会继续向上找，找到的就是for循环中的i值，也就是for循环执行完毕之后的i值，结果就是3 。

2、这道题没有使用到从外部访问内部变量，只是利用了一个特性：点击事件执行的时候，获取立即执行函数中保存的变量i值。

Tammyy 提问者 #1

老师，绑定的点击事件在循环代码块内，而且会把i传进去，i是在递增的应该是li[0] li[1] li[2] 为什么会是循环完之后的i呢？

2019-01-17 19:27:42
好帮手慕星星回复提问者 Tammyy #2

点击事件分别是给li[0]，li[1]，li[2]绑定的，但是i值并没有保存在点击事件这个作用域中，从for循环中找就是循环完之后的i值。

2019-01-18 09:41:28

好帮手慕星星 2019-01-17 10:51:03

你好，参考下图：

for循环给每一个li元素绑定上了点击事件，但是点击事件外层有一个立即执行函数，传入了每次循环的i值，这样每一个li元素的点击事件中保存的就是当前的i值，并不是循环完之后的i。

这样也就利用了闭包的特性，在立即执行函数中保存了i值，点击事件访问的是立即执行函数中保存的i值，也就是局部变量。

祝学习愉快！

提问者 Tammyy #1

老师，课堂里讲包闭性的时候，两个特点，其中一个是从外部访问内部变量。我还是没看懂您的分析，这里怎么体现了从外部访问内部变量的？

2019-01-17 16:39:04
提问者 Tammyy #2

老师，这道题，把自执行的函数拿掉，直接在循环里面li[i].onclick=function(){console.log(i);}打印出来不管点击那个永远是3，这个一直弄不明白。以前老师说是应为函数改变了作用域，但是console.log(i) 打印的这个i是他外部作用于声明的啊，老师请详细帮我讲下。

2019-01-17 16:51:28