7-立即执行函数、闭包深入、逗号运算符

(一)、立即执行函数

IIFE immediately- invoked function expression

立即执行函数页面加载的时候就自动执行了，执行完成后立即释放

立即执行函数有一个功能性的称呼-初始化函数

立即执行函数有最基本的两种写法

(1)、写法

写法1

(function(){

})();

写法2------w3c建议的写法

(function(){

}());  

(2)、参数

立即执行函数可以带参数

(function(a,b){
	console.log(a + b); 
}(2,4));

(3)、返回值

立即执行函数也是有返回值的,如果要接受返回值就把交给变量保存起来

var num = (function(a,b){
  return a + b;
}(2,4));
console.log(num);

括号括起来的，是函数也好，是数字也好，是变量也好，都是表达式
括号里面包裹的不管是什么东西都会变成表达式
记住一定是表达式才能被执行符号执行

(function test1(){
  console.log(1);
})();                      //能执行
var test2 = function(){
  console.log(1);
}(); 											//能执行
function test3(){ 
  console.log(1);         //会报语法错误
}();

下面案例能够证明立即执行函数：

1、立即执行

2、执行完就销毁

这两种写法效果一样，只要变成了表达式，函数名就被忽略了

(function(){
  console.log(123);
})();

(function test(){
   console.log(123);
})();

​ 将一个函数的声明变成一个表达式

//以下都可以执行（需要将一个函数的声明变成一个表达式）
//函数声明变成表达式的方法 + - ！|| &&
//总结下来就是将函数声明转化为表达式后就可以使用执行符号了，立即执行该函数，并且该函数声明的函数名会被忽略
//被括号括起来的任何东西，即使说不是表达式也会被转换成表达式
+ function test(){
 			console.log(1);
 }();  
 
 - function test(){
 			console.log(1);
 }();  
 
  ! function test(){
 			console.log(1);
 }();
 
 1 && function test(){
 console.log(1);
 }();
 
 0 ｜｜ function test(){
 console.log(1);
 }();

一道面试题

function test(a){
  console.log(1);
}();   //这种写法会报语法错误

function test(a){
 console.log(1);
}(6);  //这种写法不会被报错，因为会把转化成下面的写法


function test(a){
  console.log(1);
}
(6);  //会把这当成表达式

(4)、立即执行函数经典案例

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

var myArr = test();

for(var j = 0; j < 10 ;j++){
  myArr[j]();
}
//会打印出来10个10

function test(){
  var arr = [];    //arr里面实际上是存了10个匿名函数
  var i = 0
  for(; i < 10; ){
   arr[i] = function(){
       document.write(i + ' ');
   }
    i++;
  }
  return arr;  //return了10个匿名函数，形成了闭包 return出去的时候i已经变成10了
}

var myArr = test();

for(var j = 0; j < 10 ;j++){  //在循环myArr的时候实际上拿到的是最后一次i的值
  myArr[j](); 
}

//要想打印0到9,就这样写   在循环的时候立即执行
function test(){
  for(var i = 0; i < 10; i++){
     (function(){
       document.write(i + ' ');
     })();
  }
}

test();

//这种写法也能打印0-9   借助外界的力量 传个参数
// 不让我每次取i的值，我每次取j的值，在执行的时候传递不同的参数
function test(){
  var arr = [];
  
  for(var i = 0; i < 10; i++){
     arr[i] = function(num){
         document.write(num + ' ');
     }
  }
  
  return arr;
}

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

//这是第三种方法，最常用
//这种方法也行   //通过立即执行函数将每次的i保存下来
function test(){
 var arr = [];
 for(var i = 0; i < 10; i++){
    (function(j){
       arr[j] = function(){
          document.write(j + ' ');
       }
    })(i); // i实参 j是形参 ，每次循环i都会把j替换掉
 }
 
 return arr;
}

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

(二)、闭包

面试题1、

每次点击都是5

//用立即执行函数将代码包裹起来可以解决这个问题
for(var i = 0; i < oLi.length ; i++){
  （function(j){
      oLi[j].onclick = function(){
         console.log(j);
      }
  }）(i);
}

面试题2、

//与这个知识点相关联
var num = (1,2);
console.log(num); //2

//面试题  非常非常重要
var fn = (
  function test1(){
     return 1;
  },
  function test2(){
     return '2';
  }
)();

console.log(typeof(fn)); //string

面试题3、

//非常经典
var a = 10;
if(function b(){}){     // (function b(){})被括号括起来了b就被忽略了
  a += typeof(b);
}
console.log(a);   // 10undefined

(三)、逗号运算符

//逗号是一个运算符只会返回最后一个
console.log((6,5)); //5