js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?


Posted in Javascript onNovember 18, 2015

没有区别。

你需要明白 IIFE 的原理,我简单说一下:

function foo() {...}     // 这是定义,Declaration;定义只是让解释器知道其存在,但是不会运行。

foo();                   // 这是语句,Statement;解释器遇到语句是会运行它的。

IIFE 并非必须,传统一点可以这么写:

function foo() {...}

foo();

那么为什么要 IIFE?
1.传统的方法??拢?ㄒ搴椭葱蟹挚?矗?br /> 2.传统的方法直接污染全局命名空间(浏览器里的 global 对象,如 window)

于是,开发者们想找一个可以解决以上问题的写法。那么像下面这么写行不行呢?

function foo(...){}();

当然是不能,但是为什么呢?因为 function foo(...){} 这个部分只是一个声明,对于解释器来说,就好像你写了一个字符串 "function foo(...){}",它需要使用解析函数,比如 eval() 来执行它才可以。所以把 () 直接放在声明后面是不会执行,这是错误的语法。

如何把它变得正确?说起来也简单,只要把 声明 变成 表达式(Expression) 就可以了。

实际上转变表达式的办法还是很多的,最常见的办法是把函数声明用一对 () 包裹起来,于是就变成了:

(function foo() {...})    // 这里是故意换行,实际上可以和下面的括号连起来

();

这就等价于:

var foo = function () {...};    // 这就不是定义,而是表达式了。

foo();

但是之前我们说不行的那个写法,其实也可以直接用括号包起来,这也是一种等价的表达式:

(function foo(){...}());

所以你问有没有区别?很简单:木有~

另外,刚才说过转变表达式的方式很多,的确还有很多别的写法,比如:

!function foo() {...}();

或者

+function foo() {...}();

这些都可以。

我个人挺偏爱用 void 来转变表达式,因为此关键字不会有返回值。不过这一点真的没有什么要紧的,就当我“龟毛”好了……

void function () {

    // 这里是真正需要的代码

}();

OK,所谓不去污染全局命名空间,是因为 IIFE 创建了一个新的函数作用域,你真正的业务代码被封装在其中,自然就不会触碰到全局对象了。如果你需要全局对象,那就 pass 给 IIFE:

void function (global) {

    // 在这里,global 就是全局对象了

}(this)    // 在浏览器里,this 就是 window 对象

我在这里写过一个系列,其中一篇讲作用域和命名提升的,里面的知识点对理解 IIFE 有帮助,有兴趣的话可以继续深入阅读:https://3water.com/article/75090.htm

方式一,调用函数,得到返回值。强制函数直接量执行再返回一个引用,引用在去调用执行
方式二,调用函数,得到返回值。强制运算符使函数调用执行
(function(){})(); 是 把函数当作表达式解析,然后执行解析后的函数
相当于 var a = function(){}; a(); a得到的是函数
(function(){}()); 是把函数表达式和执行当作语句直接执行、
相当于 var a = function(){}(); a得到的是结果
最终结果是一样的、
()只是起了 自执行的作用
和 () 一样的还有很多
比如 +function (){}
这个等于 (function (){}) 一般用(function (){}) 还有个作用,就是 避免全局变量

Javascript 相关文章推荐
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
Angular5.1新功能分享
Dec 21 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
JavaScript的console命令使用实例
Dec 03 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 #Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 #Javascript
原生js模拟淘宝购物车项目实战
Nov 18 #Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 #Javascript
javascript实现添加附件功能的方法
Nov 18 #Javascript
Jquery Mobile 自定义按钮图标
Nov 18 #Javascript
javascript实现对表格元素进行排序操作
Nov 18 #Javascript
You might like
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
javascript中获取选中对象的类型
2007/04/02 Javascript
javascript indexOf函数使用说明
2008/07/03 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
js自定义事件代码说明
2011/01/31 Javascript
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
2017/04/24 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
JavaScript中window和document用法详解
2020/07/28 Javascript
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
大学生个人求职信范文
2013/09/21 职场文书
自动化专业本科毕业生求职信
2013/10/20 职场文书
《影子》教学反思
2014/02/21 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
小城镇建设汇报材料
2014/08/16 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
社区综治工作汇报
2014/10/27 职场文书
销售2014年度工作总结
2014/12/08 职场文书
资料员岗位职责
2015/02/10 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle