【颠覆认知的JS】- 7. 立即执行函数、闭包深入、逗号运算符

立即执行函数IIFE/ 初始化函数

• 为什么要有立即执行函数？

• 全局的函数都保存在GO中，不释放，想调用的时候可以随时调用

• 比如一个两数之和的函数，只希望这函数只执行一次，以后不会再执行，也不希望执行完还在GO里(执行完后被销毁)

• 特点：1. 自动执行 2. 执行完成之后立即释放

• 写法

•   1. 
    (function[name?没啥用...](){
    })();
    
    2. 
    (function[name?没啥用...](){
    }()); // W3C 建议
    
  

• 为什么立即执行函数可以直接执行

• 它定义函数时不是通过函数声明的方式，而是函数表达式定义的，而只有表达式才能通过()执行符号执行

•   function test(a){
      console.log(1);
    }(6)
    
    // 不报错！！
    解析为
    function test(a){
      console.log(1);
    }
    (6)
    test函数不会执行
  

• "," Operator: 返回最后一个operand value

下列程序输出结果

闭包+IIFE
function test(){
  var arr = [];
  var i = 0
  for(; i < 10; ){
    arr[i] = function(){
      document.write(i + ' ');
    }    i++;
  }
  return arr;
}

var myArr = test();
console.log(myArr); // [f,f,..] 是个匿名函数

for(var j = 0; j < 10; j++){
  myArr[j](); // 10 10 10 10 10 10 10 10 10 10
}

如何修改使得打印0 - 9呢？
实际问题：一定要用var的情况下，现在html种有n个li元素，如何实现点击哪个哪个变色？
1. IIFE就是一种解决思路：
function test(){
  for(var i = 0; i < 10; i++){
     (function(){
      document.write(i + ' ');
    })()
  }
}
test();

2. 传参
function test(){
  var arr = [];
  
  for(var i = 0; i < 10; i++){
    arr[i] = function(num){ // 传参
      document.write(num + ' ');
    }
  }
  return arr;
}

var myArr = test();
console.log(myArr); //

for(var j = 0; j < 10; j++){
  myArr[j](j);
}

3. 最常用: 利用IIFE即时销毁+仍然想返回函数
function test(){
  var arr = [];
  
  for(var i = 0; i < 10; i++){
    (function(j){ // 每一次循环的时候，把 i 保存进立即函数里 ⭐
      arr[j] = function(){ // 每次替换的时候，arr[j]和j都会被替换，值不一样，循环的是立即执行函数
        document.write(j + ' ');
      }
    })(i)
    
  }
  return arr;
}

var myArr = test();
console.log(myArr); //

for(var j = 0; j < 10; j++){
  myArr[j]();
}