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 相关文章推荐
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
Javascript函数式编程语言
Oct 11 Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
Feb 16 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 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 Error与Logging函数的深入理解
2013/06/03 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
PHP使用PHPExcel实现批量上传到数据库的方法
2017/06/08 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
Python Tkinter简单布局实例教程
2014/09/03 Python
Python+django实现简单的文件上传
2016/08/17 Python
python十进制和二进制的转换方法(含浮点数)
2018/07/07 Python
python设置环境变量的作用和实例
2019/07/09 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
Django 解决由save方法引发的错误
2020/05/21 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
Servlet面试题库
2015/07/18 面试题
小学英语教学反思案例
2014/02/04 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书