IIFE(立即执行函数表达式)

我们经常会看到这样的写法:

;(fuction () {
    // do something
})()

这就是一个简单的IIFE(立即执行函数表达式,immediately-invoked function expression)了。

这样的写法有什么好处呢?来简单分析一下。

1. 开头的分号

我们都知道,js是可以加分号或者不加分号的,在某些情况下,不加分号会让解析器解析出错,举个例子:

var
    a = 0
    , b = 0
;
a = b + 3
(b = a)
// Uncaught TypeError: 3 is not a function

解析代码的时候,a = b + 3和(b = a)这两条语句之间没有明确的分界,回车和空格会自动被忽略。解析器会认为这是一句。所以,此时会认为3是一个函数,b=a是他的参数。

在知乎的这个问题下,尤大做了解释。

真正会导致上下行解析出问题的 token 有 5 个:括号,方括号,正则开头的斜杠,加号,减号。我还从没见过实际代码中用正则、加号、减号作为行首的情况,所以总结下来就是一句话:一行开头是括号或者方括号的时候加上分号就可以了,其他时候全部不需要。其实即使是这两种情况,在实际代码中也颇为少见。

ok,回到我们的例子,我们的例子就是以括号开头的,如果上一个语句没有加分号,很可能会出现这样问题,这个分号就是为了防止这样的情况发生,称之为防御性分号。

2. function(){}

函数有两种声明方式:

function foo () {}
var foo = function () {}

这两种声明方式的不同之处在于,使用var声明的函数不会自动提升到顶部。也就是说,不能在var声明函数的语句之前调用函数,否则会抛出undefined的错误。

function () {}这种形式被称为匿名函数。匿名函数没有名字,也就是没有指针,是无法在其他地方调用的。

将匿名函数赋值给foo,则可以通过foo来调用。

当然还有办法调用它,就是例子中的两对括号。第一对括号将匿名函数包装成了一个表达式,而第二对括号意思就是立即执行它。

function () {console.log(‘a‘)} // 报错 Uncaught SyntaxError: Unexpected token (
(function () {console.log(‘a‘)}) // 返回函数定义 ? () {console.log(‘a‘)},没有log
(function () {console.log(‘a‘)})() // a
function foo() {console.log(‘a‘)}() // 报错 Uncaught SyntaxError: Unexpected token )

第一行,因为不是合法的声明方式,希望找到函数名的地方是‘(’,所以抛出了该异常。

第二行,()中的语句被当成了表达式,解析器会认为是var声明的方式。

第三行,自执行。

第四行,function foo() {console.log(‘a‘)}是正确的函数声明方式,被正确解析。接下来的一对括号依次解析,括号里需要有表达式,但是没有,所以会抛出这样的异常。

3. 好处

IIFE的好处就是不会污染全局变量,就在当前的函数体的作用域下进行操作,保证了父作用域的干净,如果return出一些函数,那这些函数就形成了闭包。

我们常用IIFE来写module。

var counter = (function(){
  var i = 0;

  return {
    get: function(){
      return i;
    },
    set: function( val ){
      i = val;
    },
    increment: function() {
      return ++i;
    }
  };
})()

Refer:

  1. 维基百科:立即调用函数表达式
  2. 知乎:JavaScript 语句后应该加分号么?
时间: 2024-10-01 21:29:34

IIFE(立即执行函数表达式)的相关文章

创建自执行函数表达式

首先贴一段这样的代码 //正确的代码var foo=function(){ //函数内容 }; foo(); 对于这段代码大家都很熟悉,创建一个函数表达式并且立即执行.接下来,我们试着去把这段代码简化,变成一个立即执行函数表达式. //错误的代码function(){ //函数内容 }() 这段代码与上面代码的区别就是把foo省略了,直接替换成function,但是很明显这样做是不行的,js会给我们报出一个错误. 为什么这样会报错呢?其实原因很简单,函数声明以function关键字开始,同时函数

js自执行函数表达式

// 下面2个括弧()都会立即执行 (function () { /* code */ } ()); // 推荐使用这个(function () { /* code */ })(); // 但是这个也是可以用的 和普通function执行的时候传参数一样,自执行的函数表达式也可以这么传参,因为闭包直接可以引用传入的这些参数,利用这些被lock住的传入参数,自执行函数表达式可以有效地保存状态. // 这个代码是错误的,因为变量i从来就没背locked住// 相反,当循环执行以后,我们在点击的时候i

立即执行函数表达式(自执行函数)

立即执行函数表达式 立即执行函数表达式,大部分人也称为自执行函数. 自执行函数的写法 匿名函数 (function(){ console.log(2) })() 具名函数 (function log(){ console.log(2) })() 自执行函数的传参 (function add(a, b){ console.log(a + b) })(1,2) 返回值 let fn = (function add(a,b){ return a + b; })(2,4); console.log(fn

javascript立即执行函数表达式(IIFE)

常用的两种写法: (function(){ /* code */ }()); (推荐写法) (function(){ /* code */ })(); Q:为什么这样写,函数就嗯那个立即执行? A:因为在javascript里,括号内部不能包含语句,当解析器对代码进行解释的时候,先碰到了(),然后碰到function关键字就会自动将()里面的代码识别为函数表达式而不是函数声明. eg:如下代码就会报错. function(){ /* code */ }(); // SyntaxError: Un

JS-立即执行函数表达式(IIFE)

javascript函数调用 在javascript中,每一个函数在被调用的时候都会创建一个执行上下文,在该函数内部定义的变量和函数只能在该函数内部被使用,而正是因为这个上下文,使得我们在调用函数的时候能创建一些私有变量. 先声明后调用 // 声明: var foo = function(){ /* code */ }; // 调用: foo(); 如果想不声明直接调用 function(){ /* code */ }(); // 报错:SyntaxError: Unexpected token

基础-函数3(IIFE立即执行函数)

参考链接: http://benalman.com/news/2010/11/immediately-invoked-function-expression/#iife http://segmentfault.com/a/1190000003985390 IIFE是在后面进入模块编程看到的,对于它长成那个样子,原来也是和闭包那块经常一块出在面试题里的,让人容易脸盲||| 本文用于初识庐山面目,欢迎各路大侠吐槽~ IIFE-immediately invoked function expressi

自执行函数表达式

JavaScript里括弧()里面不能包含语句,所以在这一点上,解析器在解析function关键字的时候,会将相应的代码解析成function表达式,而不是function声明.(一个表达式会产生一个值) (function () { /* code */ } ()); // 推荐使用这个 (function(){alert(1);})();  // 但是这个也是可以用 // 由于括弧()和JS的&&,异或,逗号等操作符是在函数表达式和函数声明上消除歧义的 // 所以一旦解析器知道其中一个

理解JavaScript的立即调用函数表达式(IIFE)

首先这是js的一种函数调用写法,叫立即执行函数表达式(IIFE,即immediately-invoked function expression).顾名思义IIFE可以让你的函数立即得到执行(废话). 一般来说,IIFE有以下几种用途: 1. 创建只使用一次的函数,并立即执行它. 2. 创建闭包,保存状态,隔离作用域. 3. 作为独立模块存在(例子如jQuery),防止命名冲突,命名空间注入(模块解耦). 1. 创建只使用一次的函数,并立即执行它 创建只使用一次的函数比较好理解,在需要调用函数的

JavaScript:立即执行的函数表达式

先要理解清楚几个概念: 以下转自:http://www.cnblogs.com/TomXu/archive/2011/12/31/2289423.html 问题的核心 当你声明类似function foo(){}或var foo = function(){}函数的时候,通过在后面加个括弧就可以实现自执行,例如foo(),看代码: // 因为想下面第一个声明的function可以在后面加一个括弧()就可以自己执行了,比如foo(),// 因为foo仅仅是function() { /* code *