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

0人阅读 评论(0) 收藏 举报
分类:


https://segmentfault.com/q/1010000000442042

没有区别。

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

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

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

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

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

那么为什么要 IIFE?

  1. 传统的方法啰嗦,定义和执行分开写;

  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://segmentfault.com/a/11...

查看评论

深入Javascript Function(函数)视频教程

-
  • 1970年01月01日 08:00

js立即执行函数(function ( ){})( ) 与 (function ( ){}( )) 区别

结论:没有区别。 下面说下立即执行函数表达式(IIFE)的原理: function foo(){...} //这是函数定义,解释器遇到它的时候,不会运行; foo(); //这是语句,...
  • inhumming
  • inhumming
  • 2018-01-04 20:56:45
  • 34

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

最近再写js,想直接执行方法又不要定义再执行这么麻烦。网上找了一些资料,挺全面的: 点击打开链接...
  • goon202
  • goon202
  • 2017-02-23 19:41:42
  • 145

为您解惑:立即执行函数: (function ( ){...})( ) 与 (function ( ){...}( )) 有什么区别.........

1.  传统的方法定义(声明)并执行如下:       function foo() {...}     // 这是定义 ;定义只是让解释器知道其存在,但是不会运行。       foo();  ...
  • zhangq0123
  • zhangq0123
  • 2016-10-31 10:46:55
  • 98

Function和function有什么区别

Function和function区别
  • MoRan_Lei
  • MoRan_Lei
  • 2017-06-24 11:46:57
  • 155

立即执行函数-$(function(){})篇

QQ:1187362408 欢迎技术交流和学习 立即执行函数-$(function(){})篇(jquery): TODO: 1,jquery:jQuery(function($){ }) 与 ...
  • HR1187362408
  • HR1187362408
  • 2015-06-29 09:22:59
  • 4412

js立即执行函数: (function ( ){})( ) 与 (function ( ){}( ))

没有区别。 你需要明白 IIFE 的原理,我简单说一下: function foo() {...} // 这是定义,Declaration;定义只是让解释器知道其存在,但是不会运行。 fo...
  • cherrybomb1111
  • cherrybomb1111
  • 2017-06-07 14:48:11
  • 100

立即执行函数: (function ( ){...})( ) 与 (function ( ){...}( )) 的区别

(function(){})(); 是 把函数当作表达式解析,然后执行解析后的函数,相当于 var a = function(){}; a(); a得到的是函数(function(){}()); 是把...
  • dolin88
  • dolin88
  • 2018-04-09 15:16:19
  • 4

请问下(function($){}) 和$(function(){}) 和$(function($){}) 有什么区别

一、先看 jQuery(function(){ }); 全写为 jQuery(document).ready(function(){ }); 意义为在DOM加载完毕后执行...
  • ccecwg
  • ccecwg
  • 2015-01-30 09:34:30
  • 270

js 在定义的时候立即执行的函数表达式(function)写法

(function(){... ...})() or (function(){... ....}())(推荐) 是两种JS 立即执行函数的常见写法。 很可能一开始 大家会像我一样,以为 functio...
  • lx_zheng
  • lx_zheng
  • 2016-11-10 10:02:01
  • 1978
    个人资料
    等级:
    访问量: 27万+
    积分: 2540
    排名: 1万+
    最新评论