Loading

IIFE和闭包和let

一、立即执行函数

IIFE(Immediately-Invoked Function Expression),即立即执行函数,或者说匿名立即执行函数。

早期的时候,也就是ES6还没出来之前,作用域只有函数作用域和全局作用域,但是没有块级作用域。当我们需要快速执行一段代码,代码中有变量的时候,但是又不想污染全局变量,而且又不想以函数的方式调用它的时候,es6之前似乎只有用立即执行函数才可以创建类似块级作用域的作用。

例子:

(function (invokeindex){
  console.log(invokeindex)
})(10)

输出结果:10

二、闭包

闭包其实使用方法就是函数嵌套函数,它能够使全局作用域下间接访问函数内部的变量,也可以避免了全局变量的污染。

例子:

function bibao(){
  var a = 10;
  return function(){
    console.log(a)
  }
}
var num = bibao()
num()

输出:10

三、let

let是es6出来的定义,它使js有了块级作用域的概念,它的出现使立即执行函数变得不再必要;

四、IIFE和闭包和let

现在提出一个需求,就是生成一系列函数,执行第一个函数输出1,执行第二个函数输出2,用闭包实现

例子1:

function createArrFn(){
  var arr = [];
  for(var i = 0 ;i<10;i++){
    arr[i] = function(){
      console.log(i)
    }
  }
  return arr;
}
var fnarr=createArrFn()
for(var j=0;j<10;j++){
  fnarr[j]()
}

执行结果:输出10个10;这是因为变量i在执行的时候都是引用同一个变量。

例子2:使用立即执行函数后

function createArrFn(){
  var arr = [];
  for(var i = 0 ;i<10;i++){
    (function(ii){
      arr[ii] = function(){
        console.log(ii)
      }
    }(i))//i会传参给ii,此处会立即执行,生成的每一个arr函数的ii变量都是独立的,互不影响
  }
  return arr;
}
var fnarr=createArrFn()
for(var j=0;j<10;j++){
  fnarr[j]()
}

运行结果:

 

 运行结果是自己想要的。

例子三:使用let

function createArrFn(){
  var arr = [];
  for(let i = 0 ;i<10;i++){//此处i为块级作用域
    arr[i] = function(){
      console.log(i)
    }
  }
  return arr;
}
var fnarr=createArrFn()
for(var j=0;j<10;j++){
  fnarr[j]()
}

执行结果:

 

 五、总结

其实IIFE和let在某些情况下的作用一样,它们都可以创建块级作用域,使用它们创建的变量,都会产生一个块级作用域,for循环下产生的变量互不影响,都为重新生成的变量。

而不会像传统的var定义的变量一样,在for循环下产生的变量都是对同一个变量进行操作。

posted @ 2021-08-13 17:11  兜里还剩五块出头  阅读(169)  评论(0编辑  收藏  举报