关于立即调用的函数表达式(IIFE)
在 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)的更多相关文章
- 立即调用的函数表达式---IIFE
有些人则称为“自执行的匿名函数” 在闭包中,我们经常需要使用到匿名函数,我感觉闭包就是一种匿名函数,子集. 但是直接在匿名函数后面调用函数是会出错的.比如: function () { alert(& ...
- 立即调用的函数表达式IIFE
1.写法 (function () { alert("IIFE");})();//或者(function () { alert("IIFE"); }());
- 理解JavaScript的立即调用函数表达式(IIFE)
首先这是js的一种函数调用写法,叫立即执行函数表达式(IIFE,即immediately-invoked function expression).顾名思义IIFE可以让你的函数立即得到执行(废话). ...
- 深入理解javascript系列(4):立即调用的函数表达式
本文来自汤姆大叔 前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行. 在详细了解这个之前,我们来谈了解一下“自执行”这个叫法,本文对这个功能的叫法 ...
- [Effective JavaScript 笔记] 第13条:使用立即调用的函数表达式创建局部作用域
function wrapElements(a){ var res=[],i,n; for(i=0,n=a.length;i<n;i++){ res[i]=function(){return a ...
- [JS]深入理解JavaScript系列(4):立即调用的函数表达式
转自:汤姆大叔的博客 前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行.在详细了解这个之前,我们来谈了解一下"自执行"这个叫法 ...
- <深入理解JavaScript>学习笔记(4)_立即调用的函数表达式
前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行.(小菜理解:的确看到好多,之前都不知道这是自执行匿名函数) 在详细了解这个之前,我们来谈了解一下 ...
- js 匿名函数-立即调用的函数表达式
先提个问题, 单独写匿名函数为什么报错?return 匿名函数 为什么不报错? 如图: 第二种情况在 f 还没有执行的时候,就报错了,,,当然这得归因于函数声明语句声明提前(发生在代码执行之前)的原因 ...
- javascript立即调用的函数表达式N种写法(第二篇)
原文:javascript立即调用的函数表达式N种写法(第二篇) 上一篇博客我谈到将函数声明转换为函数表达式最常见的一种写法是:通过括号()将匿名函数声明转换为函数表达式即(function(){}) ...
随机推荐
- Doker容器部署Tomcat服务器
1.拉取tomcat服务镜像文件 root@ubuntu:~# docker pull registry.cn-hangzhou.aliyuncs.com/xxxx/xxxxx:web web: Pu ...
- Centos7.3之K8S安装初体验
容器是发展趋势,所以是时候从虚拟机中脱离出来,投入到容器化的怀抱中了. 曾经试过安装k8s,都没有成功,各种乱七八糟的报错,于是一拖再拖,这次总算发现一个可以快速部署的工具,终于安装成功了. 这个k8 ...
- Jeecg 支持多视图设置
<!-- 视图解析器1:html视图解析器 必须先配置freemarkerConfig,注意html是没有prefix前缀属性的 --> <bean id="freemar ...
- SpringBoot小技巧:统一异常处理
SpringBoot小技巧:统一异常处理 情景描述 对于接口的定义,我们通常会有一个固定的格式,比如: 但是调用方在请求我们的API时把接口地址写错了,就会得到一个404错误,且不同于我们定义的数据格 ...
- 消息中间件 kafka rabbitmq 选型差异
https://www.zhihu.com/question/43557507 https://baijiahao.baidu.com/s?id=1610644333184173190&wfr ...
- Python unittest(PyUnit)单元测试框架
PyUnit(unittest) 是 Python 自带的单元测试框架,用于编写和运行可重复的测试.PyUnit 是 xUnit 体系的一个成员,xUnit 是众多测试框架的总称,PyUnit 主要用 ...
- 【LOJ3099】[SNOI2019]积木(搜索)
lca 学长出的我省省选的神仙题目 省强我菜系列 题目 LOJ3399 分析 我可能说不清楚,对着代码理解吧 -- 感觉这题的主要难点是:不要想他具体是怎么操作的,只要知道他一定存在一种操作方式能够实 ...
- 防范sql注入值得注意地方
sql注入是大家基本都清楚,一般来说用参数化就能解决注入的问题,也是最好的解决方式. 有次技术群里问到一个问题,如下图 很显然tableName是外部传递过来的,暂时不考虑具体的业务环境,但如果以se ...
- [转帖]SSD和内存数据库技术
SSD和内存数据库技术 自己的理解还是不是很对 SSD 提升的是 随机读 并没有对顺序写有多大的提升, 因为数据库采用的是redo的模式. 理论上写入 时是顺序写 所以 写并发的提升不会很大 但是会很 ...
- Vue框架(二)——Vue指令(v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令)、todolist案例、Vue实例(计算、监听)、组件、组件数据交互
Vue指令 1.v-once指令 单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...