立即执行函数是什么,与普通函数的区别在哪里?

608 阅读3分钟

函数是程序中非常重要的一部分,可以说没有函数就没有编程。

页面中JS执行顺序

JS是单线程的,执行顺序是按照文本顺序自上而下执行的,具体来说是按照js代码块(每一段script标签内的js代码)一段一段来执行的,而先执行的代码块不会被释放。

在每段js代码块中,js虽然没有像Java高级语言的预编译机制,但是在javascript中,会提前对函数声明优先解读,这就是js中的“函数式声明提升”,所以函数声明也可以在函数调用表达式后面。

也就是平常的函数调用,一旦声明,在这个页面的头尾随时都可以调用,函数声明一直存在着随时准备着被调用,没有被释放。

但是要注意:前面的代码块中不能调用在后面代码块的函数声明。

什么叫立即执行函数呢?

前面的函数都是声明和调用分开,而且可以不限次被调用,这是模块化思想的体现。但是对那些只需要执行一次的函数,怎么办呢?这就要用到立即执行函数。

立即执行函数,其实也可以叫初始化函数,英文名:IIFE,immediately-inovked-function expression。立即执行函数就是在定义的时候就立即执行,执行完以后就释放,包括函数内部的所有变量。

比如在页面完成初始化完成后执行的函数一般都是立即执行函数。

立即函数的表达式写法:

1 常用写法,也就是双括号形式:

2 w3c建议方式,也就是单括号的形式或者三括号形式:

其实就是讲方法1又装进了一个括号里面。

立即执行函数的使用须知

1 可以带参数

同其他正常的函数一样,立即执行函数可以带参数。

2 可以有返回值

立即执行函数可以有返回值,但是因为其执行完就释放了,所以要将其返回结果存放在一个变量中。

3 执行完立即销毁

报错,add函数未定义,因为立即执行函数执行之后就销毁了

立即执行函数的特别说明

立即执行函数不需要带函数名,如果带了函数名,则被自动忽略。

立即执行函数本篇先介绍到这,下一篇深挖以下立即执行函数的本质是什么。下面用两个题目来巩固下基础知识。

立即执行函数有什么用?

只有一个作用:创建一个独立的作用域。

这个作用域里面的变量,外面访问不到(即避免「变量污染」)。

以一个著名的面试题为例:


var liList = ul.getElementsByTagName('li')
for(var i=0; i<6; i++){
  liList[i].onclick = function(){
    alert(i) // 为什么 alert 出来的总是 6,而不是 012345
  }
}

为什么 alert 的总是 6 呢,因为 i 是贯穿整个作用域的,而不是给每个 li 分配了一个 i,如下:

那么怎么解决这个问题呢?用立即执行函数给每个 li 创造一个独立作用域即可(当然还有其他办法):


var liList = ul.getElementsByTagName('li')
for(var i=0; i<6; i++){
  !function(ii){
    liList[ii].onclick = function(){
      alert(ii) // 0、1、2、3、4、5
    }
  }(i)
}

在立即执行函数执行的时候,i 的值被赋值给 ii,此后 ii 的值一直不变。

i 的值从 0 变化到 5,对应 6 个立即执行函数,这 6 个立即执行函数里面的 ii 「分别」是 0、1、2、3、4、5。

以上,就是立即执行函数的基本概念。

立即执行函数的三种写法:

  • 第一种

(function(){})();
  • 第二种
function(){}())
  • 第三种

!function(){}()