立即执行函数: (function(){...})() 与 (function(){...}()) 有什么区别?
没有区别。
定义函数有两种方式:一种是函数声明,另一种是函数表达式.
函数声明: function foo(arg0,arg1,arg2){
//函数体
}
函数表达式: var foo = function (arg0,arg1,arg2){
//函数体
}
------------------------------------------------------------------------------------------------------
function foo() {...} // 这是定义,Declaration;定义只是让解释器知道其存在,但是不会运行。
foo(); // 这是语句,Statement;解释器遇到语句是会运行它的。
IIFE 并非必须,传统一点可以这么写:
function foo() {...}
foo();
那么为什么要 IIFE?
- 传统的方法啰嗦,定义和执行分开写;
- 传统的方法直接污染全局命名空间(浏览器里的
global对象,如window)
如果想要立即执行函数表达式这个函数,该怎么办?
于是,开发者们想找一个可以解决以上问题的写法。那么像下面这么写行不行呢?
-------------------------------------------------------------------------------------------------
function foo(参数){代码块}( ); //这样写不可以(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 对象
立即执行函数: (function(){...})() 与 (function(){...}()) 有什么区别?的更多相关文章
- 使用"立即执行函数"(Immediately-Invoked Function Expression,IIFE)
一.原始写法 模块就是实现特定功能的一组方法. 只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块. function m1(){ //... } function m2(){ // ...
- 立即执行函数(IIFE)的理解与运用
作为JavaScript的常用语法,立即执行函数IIFE(Immediately-Invoked Function Expression)是值得我们认真去学习探究的. 一.创建函数的两种方式 我们先从 ...
- 基础-函数3(IIFE立即执行函数)
参考链接: http://benalman.com/news/2010/11/immediately-invoked-function-expression/#iife http://segmentf ...
- JavaScript中为什么使用立即执行函数来封装模块?
最近在学习JavaScript基础,在学习到面向对象编程时,学习到在JavaScript中实现模块化的方法,其中一个重要的点是如何封装私有变量. 实现封装私有变量的方法主要是: 使用构造函数 func ...
- 【repost】js中(function(){…})()立即执行函数写法理解
摘要: javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ...
- js中(function(){…})()立即执行函数写法理解
文章摘自https://my.oschina.net/u/2331760/blog/468672?p={{currentPage+1}} 摘要: javascript和其他编程语言相比比较随意,所以j ...
- javascript立即执行函数 (function(){})()
看到一段代码: (function(){ var outer = $('#subject'); outer.find('li').on('mouseover', mouseover); })() ( ...
- 深入理解javascript中的立即执行函数(function(){…})()
投稿:junjie 字体:[增加 减小] 类型:转载 时间:2014-06-12 我要评论 这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是 ...
- js中(function(){…})()立即执行函数写法理解(转载oschina)
( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到 ...
随机推荐
- WebApi接口传参不再困惑(4):传参详解(转载)
WebApi接口传参不再困惑(4):传参详解 前言:还记得刚使用WebApi那会儿,被它的传参机制折腾了好久,查阅了半天资料.如今,使用WebApi也有段时间了,今天就记录下API接口传参的一些方 ...
- VC 6中配置OpenGL开发环境
2010,2012中配置类似 http://hi.baidu.com/yanzi52351/item/f9a600dffa4caa4ddcf9be1d VC 6中配置OpenGL开发环境 这里,我习惯 ...
- 网络服务器之HTTPS服务
import ssl, socket, time if __name__ == "__main__": context = ssl.SSLContext(ssl.PROTOCOL_ ...
- target-densitydpi
一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi).Android支持三种屏幕像素密度:低像素密度,中像素密度,高像素密度.一个低像素密度的屏幕每英寸上的像素点更少,而一个高像素 ...
- imx6 Image Vector Table (IVT)
imx6开启启动之后,运行板子上的ROM程序.ROM确定启动的设备,进行一些初始化,然后读取IVT,进行寄存器初始化,最后运行uboot/cpu/arm_cortexa8/start.S中的_star ...
- WP8.1 和UWP 如何使用下载网页的上的音频 并保存
WP8.1: private async Task<StorageFile> GetVoiceData() { HttpClient httpclient = new HttpClient ...
- web前端程序员真的值这么多钱吗?
对于互联网公司来说用户就是上帝,做好客户体验一切才有可能.所以互联网公司都会把钱砸向前端,Web前端程序员也越来越受到企业争相聘用. 前端工程师工资也越来越高,目前Web前端工程师工作1~2年后通常会 ...
- kafka windows环境搭建 测试
http://www.cnblogs.com/alvingofast/p/kafka_deployment_on_windows.html 照着例子搭建成功
- Python学习【第六篇】运算符
运算符 算数运算: a = 21 b = 10 c = 0 c = a + b print ("1 - c 的值为:", c) c = a - b print ("2 - ...
- jquery easyui-datagrid/treegrid 清空数据参考
在使用easyui的treegrid或datagrid的过程经常会有这样的场景,如:需要按不同的类型加载数据时,如果选择的分类下没有数据应该把上次展示的数据清空,以免引用歧义.下面给出两种方法供初学者 ...