进击的 JavaScript(五) 之 立即执行函数与闭包

前面的闭包中,提到与闭包相似的立即执行函数,感觉两者还是比较容易弄混吧,严格来说(因为犀牛书和高程对闭包的定义不同),立即执行函数并不属于闭包,它不满足闭包的三个条件。


一、圆括号运算符

圆括号运算符也叫分组运算符,它有两种用法:如果表达式放在圆括号中,作用是求值;如果跟在函数后面,作用是调用函数

把表达式放在圆括号之中,将返回表达式的值

console.log((1+2)); // 3

将函数放在圆括号中,会返回函数本身。如果圆括号紧跟在函数的后面,就表示调用函数,即对函数求值

console.log((function testa(){return 666;}));
// function testa(){return 666;}

console.log(function testa(){return 666;}());
// 666

注意:圆括号运算符不能为空,否则会报错

();//SyntaxError: Unexpected token )

由于圆括号的作用是求值,如果将语句放在圆括号之中,就会报错,因为语句没有返回值

(var a = function(){return 666});
// SyntaxError: Unexpected token var


二、函数声明

使用 function 关键字创建一个函数,并且后面带有函数名,叫函数声明。

function testa(){}


三、匿名函数

那么使用 function 关键字创建的函数不带函数名呢? 那就是匿名函数了。

function (){}


四、函数表达式

那么把匿名函数赋值给一个变量呢?那就是函数表达式了。

var testa = function (){}

其实呢,函数表达式的根本所在,就是阻止了js引擎把 function创建的函数 当作函数声明来解析。下面再详说。


五、立即执行函数(IIFE)

那么立即执行函数呢?

function定义函数之后,立即调用该函数。这种函数就叫做立即执行函数,全称为立即调用的函数表达式IIFE(Imdiately Invoked Function Expression)

1、在本系列进击的 JavaScript(三)中到过,代码执行时,会先对函数声明的函数 进行解析(函数声明提升),而函数表达式,当逐行执行到它时,才会解析。

2、正因为函数声明的提升,导致函数声明不能立即执行。因为,函数声明时,js只会解析到大括号(})就结束了,如果后面有(),只是一个圆括号运算符。

function testa(){
    console.log("testa")
}("666")

//"666"
//如果后面是一个空的圆括号,会报错,上面提到过。

所以,不知道,你有没有发现,函数声明的函数,后面可以不用分号(;)分隔,也可以正常执行,而函数表达式的后面就必须加分号,不然会报错。你可以自己写个小栗子验证下。

3、匿名函数是不能单独写的,所以就提不上立即执行了。

function (){}
//Uncaught SyntaxError: Unexpected token (

单独写匿名函数,是会报错的,js引擎 会把它当作函数声明来解析,而函数声明就必须要有个函数名,所以会报错。
所以,你通常看到使用匿名函数,都是当作参数传递的,或者把匿名函数转为函数表达式。

4、因此,只有函数表达式可以立即执行

var testa = function (){
    console.log("testa")
}()
//"testa"

上面提到过,函数表达式,就是阻止了js引擎把 |用function创建的函数| 当作函数声明来解析。

注:javascript引擎规定,如果function关键字出现在行首,一律解释成函数声明语句。

所以,解决方法就是不要让function出现在行首,让引擎将其理解成一个表达式。

//常用的两种,使用圆括号运算符
(function(){console.log("666")})()
(function(){console.log("666")}())

//一元运算符写法
!function(){console.log("666")}()
+function(){console.log("666")}()
-function(){console.log("666")}()
~function(){console.log("666")}()

都是都可以把函数声明 转为 函数表达式,也就是阻止了把其当作函数声明解析。


六、立即执行函数在闭包中的应用

1、立即执行函数能配合闭包保存状态。

来看下 上节内容中闭包的例子:

function makeClosures(i){    
    var i = i;  
    return function(){
        console.log(i);     
    }
}

for (var i=1; i<=5; i++) {
    setTimeout(makeClosures(i),i*1000);  
}
//1
//2
//3
//4
//5

现在,我们来利用立即执行函数来简化它:

for (var i=1; i<=5; i++) {
    setTimeout((function(i){
        return function(){
            console.log(i);
        }
    })(i),i*1000);
}

第一个匿名函数执行完毕后,返回了第二个匿名函数。第二个匿名函数被当做setTimeout 的第一个参数传入进去。因为 setTimeout函数执行了5次,所以立即执行函数里每次都会返回了一个没有被执行的匿名函数,(这里就是返回了5个匿名函数),每个匿名函数内部保存着每次传进来的i值,因此,每个i 都是不一样的,所以,就得到了想要的结果

2、立即执行函数配合闭包 模块化中应用

(function(){
    var meg = "hello zdx";
    
    function say(arg){
        arg = arg || meg;
        console.log(arg)
    }
    
    window.say = say;
})(window)

window.say();

//"hello zdx"

首先立即执行函数,它是个匿名函数,你是得不到它的函数引用,这样,就避免了全局变量污染。其次,由于函数作用域的规则,在匿名函数外部是访问不了函数内的变量,函数等的。所以,也经常用立即执行函数模拟块级作用域。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容