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 相关文章推荐
图片格式的JavaScript和CSS速查手册
Aug 20 Javascript
javascript 计算两个整数的百分比值
Dec 26 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
Jan 06 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
js实现点赞效果
Mar 16 Javascript
vue watch监控对象的简单方法示例
Jan 07 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 socket的讲解与实例分析
2013/06/13 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
Jquery 表单验证类介绍与实例
2013/06/09 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
django rest framework之请求与响应(详解)
2017/11/06 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
通过cmd进入python的步骤
2020/06/16 Python
python连接mysql有哪些方法
2020/06/24 Python
暇步士官网:Hush Puppies
2016/09/22 全球购物
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
linux面试题参考答案(3)
2012/09/13 面试题
销售人员工作自我评价
2014/09/21 职场文书
公安机关起诉意见书
2015/05/20 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js