很多时候我们在js中定义一个函数后,只需要执行该函数一次,比如数据初始化函数;这种情况下,定义一个函数就会浪费内存空间,这是我们可以使用立即执行函数(Immediately-Invoked Function Expression 即IIFE)。
函数调用
方式1:
定义一个函数后,我们可以通过()进行调用,如下:
function fn(){}
fn();
那么我们是否可以通过如下的方式直接调用函数呢?
function fn(){}(); //SyntaxError: Unexpected token )
结果是报语法错误,因为语句是无法执行的,所以js解析器在解析时,把该语句解析成了一个函数和一个分组操作符,如下:
function fn(){}
();
而分组操作符内不能为空,所以报了语法错误。
方式2:
另一个在函数定义和调用的方式如下:
var fn = function(){};
fn();
可以看出,匿名函数赋值给一个变量后,也可以作为函数被调用,那么是否可以通过如下方式直接调用函数呢?
function(){}(); //SyntaxError: Unexpected token (
结果依然是报语法错误,原因是js解析时,除非显示的将函数定义为表达式,否则解析器都会将其当做函数申明,而上面的语句就是将其当做了函数申明,而函数声明必须要有函数名,故解析都( 括号后报错。
实现立即调用
通过上面的分析可以看出,一个函数如果想要立即执行,那么就必须显示的将函数定义为表达式的形式。故可以通过如下的一些方式,定义一个立即执行函数:
1. (function(){}()) //最推荐的方式,外面的括号将内部的函数显示的定义为函数表达式
2. (function(){})() //完全等同于以上的方式
3. !function(){}(); // 通过!元素符将函数显示的定义为表达式,然后执行,同理:+,- 也可以
4. var fn = function(){}(); //通过赋值运算符将函数显示的定义为表达式,然后执行
总之,实现函数立即执行的方式很多,但有的会与函数的返回值进行运行,如:!,+,- ;为了避免这种麻烦,我们通常采用1和2两种方式定义。
作用
立即执行函数的作用:
1. 解决闭包中的状态保存问题;(常见的一个函数内部返回多个函数,调用这些函数,打印父函数内部变量的问题)
2. 模块化开发中,定义私有变量,防止污染全局;
3. 初始化数据和页面
注意:函数表达式定义的函数,函数名外部无法引用,如下:
1. var fn = function f(){};
console.log(typeof f); //打印undefined,函数表达式的函数名f在外部是访问不到的
2. if(function f(){}){
console.log(typeof f); //同理,打印undefined,if语句中的函数解析为函数表达式,函数名f在外部是访问不到的
}
网友评论