函数是程序中非常重要的一部分,可以说没有函数就没有编程。
页面中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,而不是 0、1、2、3、4、5 } }为什么 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(){}()