JavaScript闭包

闭包

什么是闭包

闭包是一种特殊的函数

如何产生闭包

当一个内部函数引用了外部函数的数据（函数/变量）时，那么内部的函数就是闭包

闭包特点

只要闭包还在使用外部函数的数据，那么外部函数就一直不会被释放，也就是可以延长外部函数的声明周期

闭包注意点

• 当后续不需要使用闭包时，一定要手动将闭包设置为null，否则会出现内存泄露
• 默认情况下通过var定义的变量, 只要不是定义在函数中都是全局变量
• 在ES6中如果在循环中通过let定义的变量, 那么这个变量是一个局部变量
• 在ES6中由于{}是块级作用域, 所以只要在块级作用域中定义了一个函数并且这个函数中用到了块级作用域中的数据, 那么这个函数就是闭包
• for循环中通过let定义的变量每次执行循环体都会重新定义一个新的,也就是每个循环体都有一个属于自己的变量
• for循环中如果定义了函数, 这个函数用到了通过let定义的变量, 那么这个函数是一个闭包

function test() {
  var test = 666;
  return function demo() {
      console.log(test);
   }
}

let fn = test();
fn();  // 666

for(let i = 0; i < 3; i++){ // 0 1 2 3
// 由于i是局部变量, 所以每次执行完循环体都会重新定义一个i变量
// test 为闭包函数
        function test() {
            console.log(i); // 3
        }
    }
    test(); // 2

闭包循环索引

/*
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
*/
// 通过let依次设置
let oBtns = document.querySelectorAll('button');
for (var i = 0; i <= oBtns.length - 1; i++){
      let item = oBtns[i];
      item.onclick = function () {
         console.log(i);
    }
}

// 通过var
let oBtns = document.querySelectorAll('button');
for (var i = 0; i <= oBtns.length - 1; i++){
        let item = oBtns[i];
        (function test(index) {
            item.onclick = function () {
                console.log(index);
            }
        })(i);
}

排它思想

清除其它非选中元素的样式，只设置选中元素的样式

/*
<ul>
    <li class="cur">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
*/

// let
 let oLis = document.querySelectorAll('li');
    let preIndex = 0;
    for (let i = 0; i < oLis.length; i++){
        let item = oLis[i];
        item.onclick = function () {
            let preItem = oLis[preIndex];
                preItem.className = '';

                this.className = 'cur';
                preIndex = index;
        };
    }

// var
 for (var i = 0; i < oLis.length; i++){
        var item = oLis[i];
        (function (index) {
            item.onclick = function () {
                let preItem = oLis[preIndex];
                preItem.className = '';

                this.className = 'cur';
                preIndex = index;
            }
        })(i);
    }