在 JavaScript 中,圆括号 () 是一种运算符,跟在函数名之后,表示调用该函数。比如,print() 就表示调用 print 函数

有时,我们需要在定义函数之后,立即调用该函数,例如:

  1. function(){ /* code */ }();
  2. // SyntaxError: Unexpected token (

以上代码出现了语法错误
原因是,function 这个关键字即可以当作语句,也可以当作表达式

  1. // 语句
  2. function f() {}
  3.  
  4. // 表达式
  5. var f = function f() {}

其中,JavaScript 引擎规定,如果 function 关键字出现在行首,一律解释成语句

因此,上面错误的代码被认为这一段都是函数的定义,不应该以圆括号结尾,所以就报错了

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

最简单的处理,就是将其放在一个圆括号里面

  1. // 解决方式一
  2. (function(){ /* code */ }());
  3.  
  4. // 解决方式二
  5. (function(){ /* code */ })();

上面两种写法都是以圆括号开头,引擎就会认为后面跟的是一个表示式,而不是函数定义语句,所以就避免了错误

这就叫做“立即调用的函数表达式”(Immediately-Invoked Function Expression),简称 IIFE

注意,上面两种写法最后的分号都是必须的。如果省略分号,遇到连着两个 IIFE,可能就会报错

  1. // 报错
  2. (function(){ /* code */ }())
  3. (function(){ /* code */ }())

上面代码的两行之间没有分号,JavaScript 会将它们连在一起解释,将第二行解释为第一行的参数

推而广之,任何让解释器以表达式来处理函数定义的方法,都能产生同样的效果,比如下面三种写法

  1. // 写法一
  2. var i = function(){ return 10; }();
  3.  
  4. // 写法二
  5. true && function(){ /* code */ }();
  6.  
  7. // 写法三
  8. 0, function(){ /* code */ }();

甚至像下面这样写,也是可以的。

  1. !function () { /* code */ }();
  2. ~function () { /* code */ }();
  3. -function () { /* code */ }();
  4. +function () { /* code */ }();

通常情况下,只对匿名函数使用 IIFE

它的目的有两个:一是不必为函数命名,避免了污染全局变量;

二是 IIFE 内部形成了一个单独的作用域,可以封装一些外部无法读取的私有变量。

  1. // 写法一
  2. var tmp = newData;
  3. processData(tmp);
  4. storeData(tmp);
  5.  
  6. // 写法二
  7. (function () {
  8. var tmp = newData;
  9. processData(tmp);
  10. storeData(tmp);
  11. }());

上面代码中,写法二比写法一更好,因为完全避免了污染全局变量

关于立即调用的函数表达式(IIFE)的更多相关文章

  1. 立即调用的函数表达式---IIFE

    有些人则称为“自执行的匿名函数” 在闭包中,我们经常需要使用到匿名函数,我感觉闭包就是一种匿名函数,子集. 但是直接在匿名函数后面调用函数是会出错的.比如: function () { alert(& ...

  2. 立即调用的函数表达式IIFE

    1.写法 (function () { alert("IIFE");})();//或者(function () { alert("IIFE"); }());

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

    首先这是js的一种函数调用写法,叫立即执行函数表达式(IIFE,即immediately-invoked function expression).顾名思义IIFE可以让你的函数立即得到执行(废话). ...

  4. 深入理解javascript系列(4):立即调用的函数表达式

    本文来自汤姆大叔 前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行. 在详细了解这个之前,我们来谈了解一下“自执行”这个叫法,本文对这个功能的叫法 ...

  5. [Effective JavaScript 笔记] 第13条:使用立即调用的函数表达式创建局部作用域

    function wrapElements(a){ var res=[],i,n; for(i=0,n=a.length;i<n;i++){ res[i]=function(){return a ...

  6. [JS]深入理解JavaScript系列(4):立即调用的函数表达式

    转自:汤姆大叔的博客 前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行.在详细了解这个之前,我们来谈了解一下"自执行"这个叫法 ...

  7. <深入理解JavaScript>学习笔记(4)_立即调用的函数表达式

    前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行.(小菜理解:的确看到好多,之前都不知道这是自执行匿名函数) 在详细了解这个之前,我们来谈了解一下 ...

  8. js 匿名函数-立即调用的函数表达式

    先提个问题, 单独写匿名函数为什么报错?return 匿名函数 为什么不报错? 如图: 第二种情况在 f 还没有执行的时候,就报错了,,,当然这得归因于函数声明语句声明提前(发生在代码执行之前)的原因 ...

  9. javascript立即调用的函数表达式N种写法(第二篇)

    原文:javascript立即调用的函数表达式N种写法(第二篇) 上一篇博客我谈到将函数声明转换为函数表达式最常见的一种写法是:通过括号()将匿名函数声明转换为函数表达式即(function(){}) ...

随机推荐

  1. CentOS7 安装Redis和PHP-redis扩展

    aemonize yes Redis是一个key-value存储系统,属于我们常说的NoSQL.它遵守BSD协议.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的AP ...

  2. linux安装jira

    JIRA配置本地MYSQL数据库 https://blog.csdn.net/coin_one/article/details/78376238 jira7.3.6 linux安装及破解 https: ...

  3. 【Python】解决使用pyinstaller打包Tkinker程序报错问题

    问题描述 使用pyinstaller打包使用Tkinter编写的控制台程序,出现报错 15793 INFO: Adding Microsoft.Windows.Common-Controls to d ...

  4. Visual Studio Code工具使用及配置

    最近迷上了这个工具,启动速度快,好多插件.唯一不满意的地方就是svn版本控制工具.下面发现我装的一些插件及配置: 我安装的一些插件: 上面是我装的插件,等有时间再解释下插件的作用. 接下来说下配置: ...

  5. python入门之与用户交互

    目录 一.程序与用户交互 1.1 什么是与用户交互 1.2 为什么要与用户交互 1.3 如何与用户交互 1.4 python2和python3中input的区别 1.4.1 python3中的inpu ...

  6. 最近公共祖先 LCA 递归非递归

    给定一棵二叉树,找到两个节点的最近公共父节点(LCA).最近公共祖先是两个节点的公共的祖先节点且具有最大深度.假设给出的两个节点都在树中存在. dfs递归写法 查找两个node的最近公共祖先,分三种情 ...

  7. was unable to refresh its cache! status = Cannot execute request on any known server

    出现这种错误是因为: Eureka服务注册中心也会将自己作为客户端来尝试注册它自己,所以我们需要禁用它的客户端注册行为. 在 yml中设置 eureka.client.register-with-eu ...

  8. WAV文件读取

    WAV是一种以RIFF为基础的无压缩音频编码格式,该格式以Header.Format Chunk及Data Chunk三部分构成. 本文简要解析了各部分的构成要素,概述了如何使用C++对文件头进行解析 ...

  9. HTML登录注册页面简单实现

    github:传送门 , 码云: 传送门 效果参考: 登录页面,注册页面 使用了bootstrap,jQuery. 后端使用的CGI处理表单,存入MySQL数据库.(之后更新) 登录页面源码 < ...

  10. (九)pdf的构成之文件体(content属性)

    content属性简单当成一个流来处理 流内部属一个画笔,下面介绍画笔属性 文本对象: BT    文本开始 ET    文本结束   文本状态:       Tc    字符之间的距离       ...