2回答

好帮手慕夭夭

2020-01-16

已采纳

同学你好，这段代码中加了函数，函数的形参与i同名容易混淆，所以老师把它改一个名称便于你理解。如下：

先要知道函数会形成一个局部作用域，一个函数调用几次就会形成几个独立的作用域。然后看一下页面打开时，for循环执行过程。如下：

第一次循环 ,i=0 ，调用函数fn ,形成一个独立作用域。 并把i值传递给参数index，所以index=0 ，然后为索引为0的按钮（即第一个按钮）绑定了点击事件。

第二次循环 ,i=1 ，调用函数fn ,形成一个独立作用域。 并把i值传递给参数index，所以index=1 ，然后为索引为1的按钮（即第二个按钮）绑定了点击事件。

第三次循环 ,i=2 ，调用函数fn ,形成一个独立作用域。 并把i值传递给参数index，所以index=2 ，然后为索引为2的按钮（即第三个按钮）绑定了点击事件。

第四次循环，i=3 ，此时不符合i<3的循环条件，无法继续循环执行里面的内容了，即退出循环。

当按钮点击事件触发时，拿到的是自己作用域下面的参数，所以点击每一个按钮拿到的index值不同。注意，假如不传递参数，直接使用i值，由于i等于3，那么点击每一个按钮拿到的i都是一样的。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

1

好帮手慕夭夭

2020-01-14

同学你好，这段代码没有办法用图形去讲解哦。老师给你说一下执行的过程：

页面打开的时候，代码顺序执行，for循环很快就会执行完毕。而点击事件需要点击按钮才会触发，即点击按钮时，for循环已经执行完。具体参考如下：

页面打开时，for循环执行过程如下：

第一次循环 ,i=0 ，count=0 ，然后为索引为0的按钮（即第一个按钮）绑定了点击事件。

第二次循环，i=1, count=1 , 然后为索引为1的按钮（即第二个按钮）绑定了点击事件。

第三次循环，i=2, count=2 , 然后为索引为2的按钮（即第三个按钮）绑定了点击事件。

第四次循环，i=3 ，此时不符合i<3的循环条件，无法继续循环执行里面的内容了，即退出循环。

当点击按钮的时候 ，输出count+1。因为上面循环结束之后：i=3 ，count=2 。所以点击哪一个按钮，输出的都是3。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0

hiveQQ

h 谢谢老师，可以理解了。这个看别写的代码，这个帮我解析一下吧，怎么执行的？var btns = document.getElementsByTagName('button'); for (var i = 0; i < 3; i++) { fn(i); } function fn(i){ btns[i].onclick=function(){ alert(i+1); } }

h020-01-15

共1条回复