聊一聊JS的立即调用函数

聊一聊JS的立即调用函数

定义

IIFE: Immediately Invoked Function Expression,意为立即调用的函数表达式,也就是说,声明函数的同时立即调用这个函数。
对比一下,这是不采用IIFE时的函数声明和函数调用:

function foo(){
  var a = 10;
  console.log(a);
}
 
foo();

下面是IIFE形式的函数调用:

(function foo(){
  var a = 10;
  console.log(a);
})();

函数的声明和IIFE的区别在于,在函数的声明中,我们首先看到的是function关键字,而IIFE我们首先看到的是左边的(。也就是说,使用一对()将函数的声明括起来,使得JS编译器不再认为这是一个函数声明,而是一个IIFE,即需要立刻执行声明的函数。
两者达到的目的是相同的,都是声明了一个函数foo并且随后调用函数foo。

为什么需要IIFE?

如果只是为了立即执行一个函数,显然IIFE所带来的好处有限。实际上,IIFE的出现是为了弥补JS在scope方面的缺陷:
JS只有全局作用域(global scope)、函数作用域(function scope),从ES6开始才有块级作用域(block scope)。对比现在流行的其他面向对象的语言可以看出,JS在访问控制这方面是多么的脆弱!那么如何实现作用域的隔离呢?在JS中,只有function才能实现作用域隔离,因此如果要将一段代码中的变量、函数等的定义隔离出来,只能将这段代码封装到一个函数中。

在我们通常的理解中,将代码封装到函数中的目的是为了复用。在JS中,当然声明函数的目的在大多数情况下也是为了复用,但是JS迫于作用域控制手段的贫乏,我们也经常看到只使用一次的函数:这通常的目的是为了隔离作用域了!既然只使用一次,那么立即执行好了!既然只使用一次,函数的名字也省掉了!这就是IIFE的由来。

IIFE的常见形式

根据最后表示函数执行的一对 () 位置的不同,常见的IIFE写法有两种,示例如下:

  • IIFE写法一
 (function foo(){  
  var a = 10;  
  console.log(a);  
})();
  • IIFE写法二
(functionfoo(){  
    vara=10;  
    console.log(a);  
}());

这两种写法效果完全一样,使用哪种写法取决于你的风格,貌似第一种写法比较常见。
其实,IIFE不限于()的表现形式[1],但是还是遵守约定俗成的习惯比较好。

IIFE的函数名和参数

根据《You Don’t Know JS:Scope & Clouses》[2]的说法,尽量避免使用匿名函数。但是IIFE确实只执行一次,给IIFE起个名字有些画蛇添足了。如果非要给IIFE起个名字,干脆就叫IIFE好了。
IIFE可以带(多个)参数,比如下面的形式:

(function IIFE(global){
    var a = 3;
    console.log(a); // 3
    console.log(global.a); // 2
})(window);
 
console.log(a); // 2

IIFE构造单例模式

function myModule(){
  var someThing = "123";
  var otherThing = [1,2,3];
 
  function doSomeThing(){
    console.log(someThing);
  }
 
  function doOtherThing(){
    console.log(otherThing);
  }
 
  return {
    doSomeThing:doSomeThing,
    doOtherThing:doOtherThing
  }
}
 
var foo = myModule();
foo.doSomeThing();
foo.doOtherThing();
 
var foo1 = myModule();
foo1.doSomeThing();

如果需要一个单例模式的模块,那么可以利用IIFE:

var myModule = (function module(){
  var someThing = "123";
  var otherThing = [1,2,3];
 
  function doSomeThing(){
    console.log(someThing);
  }
 
  function doOtherThing(){
    console.log(otherThing);
  }
 
  return {
    doSomeThing:doSomeThing,
    doOtherThing:doOtherThing
  }
})();
 
myModule.doSomeThing();
myModule.doOtherThing();

小结

IIFE的目的是为了隔离作用域,防止污染全局命名空间。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
超赞100套网站模板 如下.CL 001.jpg 001_consultant.zip 002.jpg 002_1361070670.zip 003.jpg 003_Internet_Jobs.zip 004.jpg 004_Internet_Music.zi 005.jpg 005_greefies.zip 006.jpg 006_squick.zip 007.jpg 007_harvest55547.zip 008.jpg 008_blackberrytemplat 009.jpg 009_flower_shop.zip 010.jpg 010_lingerie_store.zi 011.jpg 011_Web_Application.z 012.jpg 012_Internet_Studio.z 013.jpg 013_puzzled.zip 014.jpg 014_F-GEN-03.zip 015.jpg 015_F-CSS-03.zip 016.jpg 016_F-CSS-02.zip 017.jpg 017_F-GEN-01.zip 018.jpg 018_temper.zip 019.jpg 019_jet_30.zip 020.jpg 020_green_web.zip 021.jpg 021_flash_web.zip 022.jpg 022_apple_web.zip 023.jpg 023_trial_impact.zip 024.jpg 024_aquatic.zip 025.jpg 025_business_events.z 026.jpg 026_cool_web.zip 027.jpg 027_genius_web.zip 028.jpg 028_expert_vision.zip 029.jpg 029_inter_craft.zip 030.jpg 030_1247149577.zip 031.jpg 031_business_design_2 032.jpg 032_delicious_fruit.z 033.jpg 033_multiflex37.zip 034.jpg 034_SimpleLife.zip 035.jpg 035_Street_Style.zip 036.jpg 036_missunderstood.zi 037.jpg 037_street_life.zip 038.jpg 038_contest.zip 039.jpg 039_clarity.zip 040.jpg 040_the_old_forest.zi 041.jpg 041_typography_paramo 042.jpg 042_subordinatetemp56 043.jpg 043_naturescharmtemp5 044.jpg 044_zenliketemp9875.z 045.jpg 045_clickerwebtemp397 046.jpg 046_BizCompanytemp456 047.jpg 047_template3673_008. 048.jpg 048_happy_template.zi 049.jpg 049_Internet_Encyclop 050.jpg 050_conceptnova.zip 051.jpg 051_free_css_full_sit 052.jpg 052_blackeyedsusan.zi 053.jpg 053_reference.zip 054.jpg 054_interlude.zip 055.jpg 055_printing.zip 056.jpg 056_numerology.zip 057.jpg 057_greenygrass.zip 058.jpg 058_collaboration.zip 059.jpg 059_breakfast.zip 060.jpg 060_newsflash.zip 061.jpg 061_discovery.zip 062.jpg 062_adios.zip 063.jpg 063_oldarchitecture.z 064.jpg 064_beauty_co.zip 065.jpg 065_jewelry_shop.zip 066.jpg 066_book_store.zip 067.jpg 067_real_estate.zip 068.jpg 068_business_company_ 069.jpg 069_electronix.zip 070.jpg 070_photo_gallery_gre 071.jpg 071_quartz_istorage.z 072.jpg 072_aero_so
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秃八哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值