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 相关文章推荐
JS模拟多线程
Feb 07 Javascript
extJs 下拉框联动实现代码
Apr 09 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
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与服务器文件系统的简单交互
2016/10/21 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
python中去空格函数的用法
2014/08/21 Python
Python安装第三方库的3种方法
2015/06/21 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
python代码实现图书管理系统
2020/11/30 Python
python 自动识别并连接串口的实现
2021/01/19 Python
JSP&Servlet技术面试题
2015/05/21 面试题
党建工作先进材料
2014/05/02 职场文书
借名购房协议书范本
2014/10/06 职场文书
银行安全保卫工作总结
2015/08/10 职场文书
七年级作文之雪景
2019/11/18 职场文书