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

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

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

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

// 语句
function f() {} // 表达式
var f = function f() {}

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

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

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

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

// 解决方式一
(function(){ /* code */ }()); // 解决方式二
(function(){ /* code */ })();

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

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

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

// 报错
(function(){ /* code */ }())
(function(){ /* code */ }())

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

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

// 写法一
var i = function(){ return 10; }(); // 写法二
true && function(){ /* code */ }(); // 写法三
0, function(){ /* code */ }();

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

!function () { /* code */ }();
~function () { /* code */ }();
-function () { /* code */ }();
+function () { /* code */ }();

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

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

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

// 写法一
var tmp = newData;
processData(tmp);
storeData(tmp); // 写法二
(function () {
var tmp = newData;
processData(tmp);
storeData(tmp);
}());

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

关于立即调用的函数表达式(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. 【Spring Boot学习之三】Spring Boot整合数据源

    环境 eclipse 4.7 jdk 1.8 Spring Boot 1.5.2 一.Spring Boot整合Spring JDBC 1.pom.xml <project xmlns=&quo ...

  2. 【转】Object.keys方法之详解

     一.语法 Object.keys(obj) 参数:要返回其枚举自身属性的对象 返回值:一个表示给定对象的所有可枚举属性的字符串数组 二.处理对象,返回可枚举的属性数组 let person = {n ...

  3. mongodb4.2.2 centos 单机安装

    下载 rpm包 wget https://repo.mongodb.org/yum/redhat/7/mongodb-org/4.2/x86_64/RPMS/mongodb-org-server-4. ...

  4. 前端与算法 leetcode 28.实现 strStr()

    # 前端与算法 leetcode 28.实现 strStr() 题目描述 28.移除元素 概要 这道题的意义是实现一个api,不是调api,尽管很多时候api的速度比我们写的快(今天这个我们可以做到和 ...

  5. zookeeper实现的分布式锁

    在分布式系统中,多个jvm对共享资源进行操作时候,要加上锁,这就是分布式锁 利用zookeeper的临时节点的特性,可以实现分布式锁 public class ZookeeperDistrbuteLo ...

  6. 014 Vue学习笔记1----Vue及Node、NPM

    1.前端开发模式的发展过程 (1)静态页面 最初的网页以HTML为主,是纯静态的网页.网页是只读的,信息流只能从服务端到客户端单向流通.开发人员也只关心页面的样式和内容即可. (2)异步刷新,操作DO ...

  7. openjudge4979 - 海贼王之伟大航路 题解

    原题链接 题目简要分析 N个点,从1号点到N号点求最短路径,且每个点都要遍历到.现在要你求出最优方案. 这道题看到后,首先的想法莫过于搜索.暴力了.这显然不太可能.而进一步思考,使用Floyed和Di ...

  8. 带小伙伴手写 golang context

    前言 - context 源码 可以先了解官方 context.go 轮廓. 这里捎带保存一份当前 context 版本备份. // Copyright 2014 The Go Authors. Al ...

  9. Locust性能测试-参数化批量注册

    前言 实现场景:所有并发虚拟用户共享同一份测试数据,并且保证虚拟用户使用的数据不重复. 例如,模拟10用户并发注册账号,总共有100个手机号,要求注册账号不重复,注册完毕后结束测试 准备数据 虚拟用户 ...

  10. Educational Codeforces Round 75 (Rated for Div. 2)

    知识普及: Educational使用拓展ACM赛制,没有现场hack,比赛后有12h的全网hack时间. rank按通过题数排名,若通过题数相等则按罚时排名. (罚时计算方式:第一次通过每题的时间之 ...