前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于立即调用的函数表达式(IIFE)

关于立即调用的函数表达式(IIFE)

作者头像
Leophen
发布2019-09-23 14:42:04
5240
发布2019-09-23 14:42:04
举报
文章被收录于专栏:Web前端开发Web前端开发

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

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

代码语言:javascript
复制
function(){ /* code */ }();
// SyntaxError: Unexpected token (

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

代码语言:javascript
复制
// 语句
function f() {}

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

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

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

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

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

代码语言:javascript
复制
// 解决方式一
(function(){ /* code */ }());

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

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

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

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

代码语言:javascript
复制
// 报错
(function(){ /* code */ }())
(function(){ /* code */ }())

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

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

代码语言:javascript
复制
// 写法一
var i = function(){ return 10; }();

// 写法二
true && function(){ /* code */ }();

// 写法三
0, function(){ /* code */ }();

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

代码语言:javascript
复制
!function () { /* code */ }();
~function () { /* code */ }();
-function () { /* code */ }();
+function () { /* code */ }();

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

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

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

代码语言:javascript
复制
// 写法一
var tmp = newData;
processData(tmp);
storeData(tmp);

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

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-09-20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档