`

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

    博客分类:
  • JS
阅读更多

你需要明白 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 对象
分享到:
评论

相关推荐

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

    主要介绍了js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别,需要的朋友可以参考下

    深入理解javascript中的立即执行函数(function(){…})()

    ( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因...

    JS立即执行函数功能与用法分析

    本文实例讲述了JS立即执行函数功能与用法。分享给大家供大家参考,具体如下: 相信大家经常会遇到下面这两种写法: (function(){ ... })() 和 (function(){ ... }()) 关于这样写是什么意思呢?有什么区别呢? 在...

    Js on及addEventListener原理用法区别解析

    一.首先介绍两者的用法: 1.on的用法:以onclick为例 第一种: obj.onclick = function(){ //do something.. ...function fn (){ ...第三种:当函数fn有参数的情况下使用匿名函数来传参: ...因为这样写函数会立即执行

    JavaScript中立即执行函数实例详解

    ( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因...

    深入理解JavaScript系列

    深入理解JavaScript系列(4):立即调用的函数表达式 深入理解JavaScript系列(5):强大的原型和原型链 深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP 深入理解JavaScript系列(7):S.O.L.I.D...

    get-flow:Node.js 流控制实用程序

    - series ,完成后回调或发生异常时立即回调。 每个任务必须是同步或异步Function并且所有异步任务必须具有名为callback的第一个参数才能被识别为异步。 Synchronous task将在 try/catch 语句包围的内部执行,任何...

    JavaScript笔记

    立即执行 2.js文件:网页外专门保存js脚本的文件--推荐 强调:HTML、CSS、JS都要使用UTF-8编码保存(window系统) 使用js文件引入网页:[removed][removed] 强调:一旦定义src属性则其中的代码失效 解释执行:...

    Excel VBA 基础教程

    4 二.Function函数............................................................ 5 三.Property属性过程和Event事件过程 ......................................... 5 第十二节内部函数.........................

    JS立即执行的匿名函数用法分析

    本文实例讲述了JS立即执行的匿名函数用法。分享给大家供大家参考,具体如下: ;(function() {})(); 1.他叫做立即运行的匿名函数(也叫立即调用函数) 2.当一个匿名函数被括起来,然后再在后面加一个括号,这个匿名...

    EXCEL编程VBA高级教程

    二.Function函数............................................................5 三.Property属性过程和Event事件过程.........................................5 第十二节内部函数..............................

    详解JS中的立即执行函数

    1.匿名函数不能单独定义,必须进行赋值操作或者立即执行,否则会被JS引擎定义为语法错误 function(){alert(dada);} VM229:1 Uncaught SyntaxError: Unexpected token 2.在函数体后面加括号就能立即调用,...

    JavaScript中的立即执行函数表达式介绍

    我们习惯看到这样的匿名函数 代码如下: (function(){  console.log(“test”); })(); 之前一直叫的是自执行的...自执行函数有下面的这一些例子: 代码如下: function foo() { foo(); } 以及 代码如下: var foo = fu

    aos.js动画的用法

    如果你不想滚动动画从页面加载(DOMContentLoaded)后就开始执行,可以使用startEvent来设置自己的事件,AOS会在document上监听这个事件: AOS.init({ startEvent: 'someCoolEvent' }); API AOS对象有2个可用的...

    达梦数据库用户手册基础学习版.rar

    8.6.1 EXECUTE IMMEDIATE 立即执行语句...................... 278 8.6.2 PREPARE 准备语句 ................................... 278 8.6.3 EXCUTE 执行语句 .................................... 279...

    ExcelVBA程序设计.doc

    3.执行函数过程 92 4.从工作表里运行函数过程 93 5.从另外一个VBA过程里运行函数过程 94 6.传递参数 95 7.明确参数类型 96 8.按地址和按值传递参数 97 9.使用可选的参数 97 10.定位内置函数 98 11.使用MSGBOX函数 99...

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

    如果不需要显示调用函数, 让这个函数在定义的时候就执行的话, 该如何写才可以呢,接下来将详细介绍实现步骤,感兴趣的朋友可以了解下

    Excel_VBA程序设计.pdf

    3.执行函数过程 100 4.从工作表里运行函数过程 100 5.从另外一个VBA过程里运行函数过程 102 6.传递参数 102 7.明确参数类型 103 8.按地址和按值传递参数 104 9.使用可选的参数 105 10.定位内置函数 106 11.使用...

Global site tag (gtag.js) - Google Analytics