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

;(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 语句后应该加分号么?

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

  1. IIFE 立即执行函数表达式-模块化

    1)立即执行 2)表达式 3)括号,分号结束 | 前缀运算符 | 表达式上下文 4)只需要执行一次,内部变量无需维护,可用于初始化 (function( ) { })( ); 或 (function( ...

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

    原文地址:benalman.com/news/2010/11/immediately-invoked-function-expression/ 译者:nzbin 也许你还没有注意到,我是一个对术语比较 ...

  3. (译)详解javascript立即执行函数表达式(IIFE)

    写在前面 这是一篇译文,原文:Immediately-Invoked Function Expression (IIFE) 原文是一篇很经典的讲解IIFE的文章,很适合收藏.本文虽然是译文,但是直译的 ...

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

    原文为 http://benalman.com/news/2010/11/immediately-invoked-function-expression/#iife ----------------- ...

  5. 【JavaScript】浅析IIFE(立即执行函数表达式)的作用

    什么是IIFE IIFE就是立即执行函数表达式(Immediately-Invoked Function Expression) 为什么需要IIFE 应用IIFE有两个比较经典的使用场景, 第一就是在 ...

  6. 详解javascript立即执行函数表达式(IIFE)

    立即执行函数,就是在定义函数的时候直接执行,这里不是申明函数而是一个函数表达式 1.问题 在javascript中,每一个函数在被调用的时候都会创建一个执行上下文,在函数内部定义的变量和函数只能在该函 ...

  7. [转]Javascript中的自执行函数表达式

    [转]Javascript中的自执行函数表达式 本文转载自:http://www.ghugo.com/javascript-auto-run-function/ 以下是正文: Posted on 20 ...

  8. IIFF(立即执行函数表达式)

    立即执行函数表达式(Immediately-invoked function expression,IIFF) 在javascript(ES5)中,是没有块级作用域的概念的 for (var i = ...

  9. 【JavaScript专题】--- 立即执行函数表达式

    一 什么是立即执行函数表达式 立即执行函数表达式,其实也可以叫初始化函数表达式,英文名:IIFE,immediately-inovked-function expression.立即执行函数表达式就是 ...

随机推荐

  1. Java加密与解密笔记(一) Base64和数据摘要算法

    对加密解密下面的内容一定要先理解: 甲乙双方要通信,中间的连接可能被人窃听甚至篡改.解决办法就是把传输的内容进行加密,用密文去传输,这样即使被监听也没办法知道信息的具体内容. 加密时,甲乙双方可以约定 ...

  2. git subtree pull 错误 Working tree has modifications

    git subtree 是不错的东西,用于 git 管理子项目. 本文记录我遇到问题和翻译网上的答案. 当我开始 pull 的时候,使用下面的代码 git subtree pull --prefix= ...

  3. datagrid 列鼠标悬浮显示全部信息

    首次发表随笔,且是java新手,求不黑,可能在高手眼里好笑,嘿嘿1,样式设置超过字数限制显示省略号:<style type="text/css"> .datagrid- ...

  4. 树莓派.安装Redis环境

    先下载安装包 cd /home/pi/Downloadswget http://download.redis.io/releases/redis-4.0.1.tar.gz 解压 tar -zxf re ...

  5. js修改title

    document.title = 'xxxxxx';

  6. label联动checkbox

    label联动checkbox时,若label包含在checkbox外层时label不需for属性,设置label的display属性为block时可以使整个div联动.

  7. LeetCode 572. Subtree of Another Tree (是否是另一个树的子树)

    Given two non-empty binary trees s and t, check whether tree t has exactly the same structure and no ...

  8. LeetCode 252. Meeting Rooms (会议室)$

    Given an array of meeting time intervals consisting of start and end times [[s1,e1],[s2,e2],...] (si ...

  9. bug:记最近出现的非功能bug

    1.android 4.1.2 的兼容bug 一直以为Android 测试 4 5 6就可以了,结果发现Android4.1.2 和Android4.3之间还是有差距的. 处理办法:验证版本兼容的时候 ...

  10. Spring框架学习之高级依赖关系配置(二)

    紧接着上篇内容,本篇文章将主要介绍XML Schema的简化配置和使用SpEL表达式语言来优化我们的配置文件. 一.基于XML Schema的简化配置方式 从Spring2.0以来,Spring支持使 ...