意译:自调用函数表达式

一、写在前面

  本文将一如既往地遵循从自身理解出发,而非100%按原文逐句翻译的方式进行“伪翻译”,若有谬误请各位指正,谢谢!!

二、介绍

  IIFE(the Immediately Invoked Function Expression):定义函数的同时并执行该函数。

三、常见的使用方式

!function(){}(); // 返回 true
~function(){}(); // 返回 -1
+function(){}(); // 返回NaN
-function(){}(); // 返回NaN
void function(){}(); // 返回undefined

四、本文要讨论的使用方式

  1. 方式一

(function(){   
})();

  2. 方式二(大神crockford推荐的方式):

(function(){
}());

五、两种使用方式的区别

让我们通过下面这个缺少分号(;)的例子来初探它们的区别吧!

方式一的示例:

(function(){
    console.log('module1');
})()(function(){
    console.log('module2');
})();
/*
 * 返回 module1 
 * 然后抛TypeError: undefined is not a function异常
 */

方式二的示例:

(function(){
   console.log('module1');
}())(function(){
   console.log('module2');
}());
/*
 * 返回 module1
 * 返回 module2
 * 最后抛出TypeError: undefined is not a function异常
 */

六、解构现象理解本质

 首先要牢记一条规则:括号会马上执行其前面的表达式。下面让我们逐步分解这两个示例,好好理解一下吧!

方式一的示例分解:

  1. 第一步先执行 (function(){console.log('module1');})() ,返回的结果是 undefined ,最后剩下将被执行的代码是 undefined(function(){console.log('module2');})(); ;

  2. 第二步根据括号会马上执行其前面的表达式这一规则,将执行 undefined(function(){console.log('module');}) ,很明显undefined不是有效函数,这样的调用方式必须抛异常的。

方式二的示例分解:

  1. 第一步先执行 function(){console.log('module1');}() ,返回结果是 (undefined) ,再经过括号运算符得到 undefined ,最后剩下将被执行的代码是 undefined(function(){console.log('module2');}());  ;

  2. 第二步将执行function(){console.log('module2');}() ,返回结果是 undefined ,最后剩下将被执行的代码是 undefined(undefined);  ;

  3. 第三步当然是抛异常了!

七、提倡的使用方式

想避免因少写一个分号造成不必要的困扰,那么就像下面的那样写吧!

;(function(){
  console.log('IIFE');
}());

原文地址:https://github.com/airbnb/javascript/issues/21#issuecomment-10203921

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

会员提问 之 JS中的私有方法有什么意义?

先说结论, (1)JavaScript没有私有方法。 (2)JavaScript的私有方法都是通过“作用域”来实现的。 (3)有没有用?有没有意义?肯定有! 什...

29280
来自专栏重庆的技术分享区

关于eslint使用规则,和各种报错对应规则。

ESLint 由 JavaScript 红宝书 作者 Nicholas C. Zakas 编写, 2013 年发布第一个版本。 NCZ 的初衷不是重复造一个轮子...

1.2K70
来自专栏PHP实战技术

PHP面试常考易错题之变量作用域解析

PHP面试中变量作用域是面试中常常出现的问题,也是必考的问题,下面就给大姐讲解一下在面试中注意的点:

13540
来自专栏散尽浮华

python常用知识梳理

接触python已有一段时间了,下面针对python基础知识的使用做一完整梳理: 1)避免‘\n’等特殊字符的两种方式: a)利用转义字符‘\’ ...

32250
来自专栏向治洪

数据结构是哈希表(hashTable)

哈希表也称为散列表,是根据关键字值(key value)而直接进行访问的数据结构。也就是说,它通过把关键字值映射到一个位置来访问记录,以加快查找的速度。这个映...

230100
来自专栏Python爬虫实战

Python指南:高级程序设计之面向对象程序设计进阶

本节中,我们将更深入地学习 Python 对面向对象的支持,学习很多可以减少必须编写的代码的总量、拓展程序的威力与功能的技术。下面以一个简单的类开始:

14120
来自专栏大前端开发

ES6特性之:Rest参数

其实在JavaScript中,通过使用arguments对象也能实现这种可变参数的能力,但是,arguments对象本身有点奇怪,它看起来像一个数组,但其实它不...

10830
来自专栏Spark学习技巧

Java动态代理原理及解析

代理:设计模式 代理模式是一种常用的设计模式,其目的就是为其他对象提供一个代理以控制对某个真实对象的访问。代理类负责为委托类预处理消息,过滤消息并转发消息,以及...

46750
来自专栏潇涧技术专栏

Python Basics

1.使用glob模块可以用通配符的方式搜索某个目录下的特定文件,返回结果是一个list

10220
来自专栏Java学习网

10个常见的 Java 错误及避免方法之第二集(后续持续发布)

当程序缺少关闭大括号(“}”)时,Java代码中就会发生此错误消息。 有时我们可以通过在代码的末尾放置大括号来快速修复错误。

10130

扫码关注云+社区

领取腾讯云代金券