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

;(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. CVPixelBuffer的创建 数据填充 以及数据读取

    CVPixelBuffer的创建数据填充以及数据读取 CVPixelBuffer 在音视频编解码以及图像处理过程中应用广泛,有时需要读取内部数据,很少的时候需要自行创建并填充数据,下面简单叙述. 创建 ...

  2. jemalloc 快速上手攻略

    引言 - 赠送个 Cygwin (加精) Cygwin 有它存在的合理性. 至少比 wine 好太多了. 它主要功能是在winds上面简易的模拟出linux环境, 比虚拟机 轻量一点点. 坑也不少, ...

  3. 设计模式:基于线程池的并发Visitor模式

    1.前言 第二篇设计模式的文章我们谈谈Visitor模式. 当然,不是简单的列个的demo,我们以电商网站中的购物车功能为背景,使用线程池实现并发的Visitor模式,并聊聊其中的几个关键点. 一,基 ...

  4. 【NOIP2016 Day1 T1】玩具谜题

    原题:https://www.luogu.org/problemnew/show/P1563 题目大意:有N个人围成一个圈,给定一串未化简的物品移动关系,要求你通过这些未化简的关系以及起始段的编号,求 ...

  5. HTML笔记<note2>

    文本标记 我是正常的文本段落 我是用b标记的加粗文本 我是用strong定义的强调文本 i标记的倾斜文本 em强调文本 del标记的删除线 del标记的下划线文本 特殊字符标记 显示 说明 空格&am ...

  6. 我的第一个python web开发框架(12)——工具函数包说明(三)

    mail_helper.py是邮件操作包,用来发送邮件的. #!/usr/bin/evn python # coding=utf-8 import smtplib from email.mime.te ...

  7. ASP.NET没有魔法——ASP.NET 身份验证与Identity

    前面的文章中为My Blog加入了文章的管理功能(ASP.NET没有魔法——ASP.NET MVC使用Area开发一个管理模块),但是管理功能应该只能由“作者”来访问,那么要如何控制用户的访问权限?也 ...

  8. 树莓派.安装Redis环境

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

  9. Yii2之事件

    众所周知,yii的三大特性是:属性.事件.行为,上一篇博文简单讲解了yii中的属性,本文接着讲讲yii的事件. 事件是代码解耦的一种方式,设计业务流程的一种模式.在yii2.0中,通过Yii\base ...

  10. ubuntu中python3.4安装pip

    这两天碰到在ubuntu中安装pip的问题. 第一种方法 用百度搜索了一下,基本上都是这个命令: sudo apt-get install python3-pip 但是,用这条命令下载速度特别慢. 第 ...