原理

    for(var i = 0; i < 3; i++){ // 0 1 2 3
        (function test() {
            console.log(i); // 0 1 2
        })();
    }
     
    /*
    for(var i = 0; i < 3; i++){ // 0 1 2 3
        // function test(index) { // var index = i;
        //     console.log(index); // 0 1 2
        // }
        // test(i);
        (function test(index) {
            console.log(index); // 0 1 2
        })(i);
    }
    */

var的情况

需求：

点击按钮1输出0 点击按钮2输出1 点击按钮3输出2

    let oBtns = document.querySelectorAll("button");
    for(var i = 0; i < oBtns.length; i++) {
        let btn = oBtns[i];
        (function test(index) { // var index = i;
            // console.log(index); // 0 1 2
            // 注意点: onclick对应的方法由于满足了闭包的条件, 所以onclick对应的方法也是一个闭包
            btn.onclick = function () {
                console.log(index);
            }
        })(i);
    }

let的情况

for(let i = 0; i < 3; i++){ // 0 1 2 3
       // 注意点: 在ES6中由于{}是块级作用域, 所以只要在块级作用域中定义了一个函数
       //         并且这个函数中用到了块级作用域中的数据, 那么这个函数就是闭包
       function test() {
           console.log(i); // 3
       }
   }
   test(); // 2

// 在ES6中
// 1.for循环中通过let定义的变量是一个局部变量
// 2.for循环中通过let定义的变量每次执行循环体都会重新定义一个新的
//   也就是每个循环体都有一个属于自己的变量
// 3.for循环中如果定义了函数, 这个函数用到了通过let定义的变量, 那么这个函数是一个闭包
for(let i = 0; i < 3; i++){
    function test() {
        console.log(i);
    }
}
let oBtns = document.querySelectorAll("button");
for(let i = 0; i < oBtns.length; i++){
    let btn = oBtns[i];
    btn.onclick = function () {
        console.log(i);
    }
}

排他思想&优化TAB选项卡

1.什么是排它思想?
清除其它非选中元素的样式, 只设置当前选中元素样式

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 400px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .current{
            background: red;
        }
    </style> 
<ul>
    <li class="current">我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
</ul>

es6之前

    let oItems = document.querySelectorAll("li");
    let previousIndex = 0;
    for(var i = 0; i < oItems.length; i++) {
        var item = oItems[i];
        (function (index) {
            item.onclick = function () {
                // 排它
                var preItem = oItems[previousIndex];
                preItem.className = "";

                this.className = "current";
                previousIndex = index;
            }
        })(i);
    }

es6之后

    let oItems = document.querySelectorAll("li");
    let previousIndex = 0;
for(let i = 0; i < oItems.length; i++){
        let item = oItems[i];
        item.onclick = function () {
            // 排它
            // for(let j = 0; j < oItems.length; j++){
            //     let li = oItems[j];
            //     li.className = "";
            // }
            let preItem = oItems[previousIndex];
            preItem.className = "";

            this.className = "current";
            previousIndex = i;
        }
    }