JavaScript的循环中保留变量i的值

又一波疫情,本来就景气的大连又一次雪上加霜。只要有希望,一切都会好的。

循环是我们常用的控制语句，在javascript中每次循环结束后其 i 值会指向最后一次的结果，这样循环注册事件时使用到 i 值便会出错

点击图片切换背景的javascript脚本

 <ul>
        <li><img src="images/1.jpg" alt=""></li>
        <li><img src="images/2.jpg" alt=""></li>
        <li><img src="images/3.jpg" alt=""></li>
        <li><img src="images/4.jpg" alt=""></li>
 </ul>
<script>
 var imgs = document.querySelector('ul').querySelectorAll('img')
 for (var i = 0; i < imgs.length; i++) {
    imgs[i].onclick = function () {
       // console.log(imgs[i].src);
    console.log(i);
    document.body.style.backgroundImage = 'url(' + imgs[i].src + ')';
    }
}
</script>

直接报错:

1	Uncaught TypeError: Cannot read property 'src' of undefined

打印变量i,永远都是指向最大索引值4

> 4

下面是解决方案

//第一种解决方案： this关键字
 for (var i = 0; i < imgs.length; i++) {
    imgs[i].onclick = function () {
       // console.log(imgs[i].src);
       console.log(i);
       document.body.style.backgroundImage = 'url(' + this.src + ')';
    }
}  
//第二种解决方案: 自动执行函数
        for (var i = 0; i < imgs.length; i++) {
            (function (inner) {
                imgs[inner].onclick = function () {
                    console.log(imgs[inner]);
                }
            })(i);
        }
  //第三种解决方案 闭包
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function (inner) {
                return function () {
                    console.log(inner);
                }
            }(i);
        }
 //第四种解决方案 let 块级作用域
        for (let i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function () {
                console.log(i);
            };
        }