`

立即执行函数: (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 对象
分享到:
评论

相关推荐

    make-file教程.rar

    函数(Function) `Makefile`还提供了很多内置函数,如`$(shell command)`执行shell命令,`$(patsubst pattern,replacement,text)`进行模式替换,`$(wildcard pattern)`匹配文件等。 ### 7. 编译规则(Compilation...

    jQuery核心源码中文注释解读

    首先,jQuery的源码通常以一个立即执行的匿名函数开始,这样做是为了避免命名冲突。JavaScript中没有严格的命名空间,因此将所有代码包裹在一个匿名函数内,可以限制其作用域,防止与其他代码的命名冲突。 ```...

    linux运维学习笔记:Shell函数.pdf

    函数调用非常简单,只需要在定义之后输入函数名即可执行函数内的代码。如果需要在当前窗口立即执行一个脚本中定义的函数,则可以使用点号`(``.`)加脚本文件名的方式。 函数还可以进行参数传递。在函数定义中,`$1`...

    javascript强制函数自动执行.pdf

    3. **立即执行**:如果你希望定义一个函数并立即执行它,可以使用函数表达式结合立即执行函数表达式(Immediately Invoked Function Expression,IIFE)的方式。 #### 立即执行函数表达式(Immediately Invoked ...

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

    JavaScript中的立即执行函数(Immediately Invoked Function Expression,简称IIFE)是一种常见的编程技巧,用于创建一个独立的作用域,避免变量污染全局环境。标题和描述中提到的两种IIFE的写法,`(function (){})...

    JSFunction函数深入解析.pdf

    如果省略函数名,它就是一个立即执行函数表达式(IIFE)。 - **构造函数创建**:`new Function('num1', 'num2', 'return num1 + num2;')` 使用`new Function()`创建函数,但这种方法不推荐,因为它会影响性能,因为...

    深化解析JavaScript中的立刻执行函数_.docx

    JavaScript中的立刻执行函数,也称为立即调用的函数表达式(IIFE,Immediately Invoked Function Expression),是一种在JavaScript中创建私有作用域和确保代码立即执行的常见技术。它的核心在于利用函数表达式来...

    javascript程序设计.rar

    3. 立即执行函数表达式(IIFE):用于创建独立的作用域,防止污染全局变量。 控制流: 1. 条件语句:`if...else`,`switch`用于根据条件执行不同的代码。 2. 循环:`for`, `while`, `do...while`循环,以及`for......

    js中function函数的使用方法.docx

    1. **立即执行函数表达式**(IIFE): ```javascript (function() { // 代码 })(); ``` 2. **散列表**: ```javascript { a: 'abc', func: function() {} } ``` 3. **普通函数**: ```javascript function...

    php中构造函数和析构函数 .txt

    ### PHP中的构造函数和析构函数 在PHP中,类的实例化以及对象生命周期...而析构函数则是在对象被销毁前执行清理任务,确保资源得到适当释放。掌握这两种特殊函数的使用方法对于提高程序的健壮性和可维护性至关重要。

    Delphi试题含答案.docx

    调用者要把参数告诉过程与函数,过程与函数要把结果传回调用者。通常在编制一个子程序时,要考虑它需要哪些输入量,进行处理和运算后要输出哪些输出量。正确地提供输入输出是子程序使用的关键问题。Delphi 中在单元...

    Web-前端教程34 JS进阶:头等函数.zip

    4. **函数表达式**:JavaScript支持匿名函数和函数表达式,比如立即执行函数表达式(IIFE),常用于创建私有作用域: ```javascript (function() { // 私有变量和逻辑 })(); ``` 5. **闭包**:由于函数可以...

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

    JavaScript中的立即执行函数,也称为IIFE(Immediately Invoked Function Expression),是一种特殊的函数表达式,其特点是函数定义的同时就会被自动执行。这种技术在JavaScript编程中广泛应用,尤其是在库和框架如...

    javascript笔记之匿名函数和闭包.docx

    1. **匿名函数自执行**:`(function(){})()`,这种写法会立即执行该匿名函数。 2. **函数内的匿名函数**:`function() { return function(){}; }`,在这里,内部的匿名函数可以访问外部函数的作用域。 **闭包**是...

    shell命令/shell脚本编写教程

    5. 函数定义:使用`function`关键字定义函数,如`function myfunc() { commands; }`。 6. 输入输出重定向:在脚本中,可以使用`、`>`、`>>`对脚本的输入和输出进行控制。 7. 错误处理:`set -e`使脚本在遇到错误时...

    PHP程序设计-3期(KC016) 2.10.3带返回值的函数常见问题.docx

    1. **return 语句的终止性**:一旦 `return` 语句被执行,函数的执行会立即停止,并将控制权交回调用者。这意味着在 `return $b;` 之后的任何代码都不会执行。因此,`$c = $b + $a;` 和 `return $c;` 这两条语句实际...

    基于PromisesA规范的简单实现

    这个构造函数接收一个执行器函数(executor),执行器内部可以执行异步操作并决定 Promise 的最终状态。 ```javascript function Promise(executor) { // 初始化状态为 pending this.status = 'pending'; this....

    jquery手册(jquery.cuishifeng.cn网页版)2

    3. **事件处理**: 使用`.on()`方法可以绑定事件,如`$(selector).on('click', function() {...})`表示当点击指定元素时执行函数。`.off()`用来移除事件绑定。 4. **动画效果**: jQuery的`.animate()`方法允许创建...

    前端大厂最新面试题-2019小米前端社招面经.docx

    2. async属性:告诉浏览器在加载脚本时不阻塞文档的解析,脚本加载完成后立即执行。 四、对象的创建方式 对象的创建方式有多种,例如: 1. 字面量方式:使用对象字面量语法创建对象,例如`let obj = {name: 'John...

Global site tag (gtag.js) - Google Analytics