专栏首页偏前端工程师的驿站意译:自调用函数表达式

意译:自调用函数表达式

一、写在前面

  本文将一如既往地遵循从自身理解出发,而非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 条评论
登录 后参与评论

相关文章

  • JS魔法堂:函数重载 之 获取变量的数据类型

    Brief                                 有时我们需要根据入参的数据类型来决定调用哪个函数实现,就是说所谓的函数重载(func...

    ^_^肥仔John
  • 编译期类型检查 in ClojureScript

    ^_^肥仔John
  • 不懂JQuery的孩子:自封装Ajax函数

    前言                                       一直没痛下决心学习JQuery,但平时项目中又要用到Ajax,于是自己写一个...

    ^_^肥仔John
  • 探究{ a = 1; function a(){} }和{ function b(){}; b = 1 }

    相信大部分人都了解了,这里再重复啰嗦一下。js是解析执行的,变量提升是js中执行上下文的工作方式。变量声明和函数声明在编译阶段会被提前。

    lhyt
  • 我理解的JavaScript预编译

    JavaScript执行过程首先先语法分析,就是分析一遍代码有没有语法错误,解析期间不会执行代码。接着就开始预编译,预编译完了就开始一行一行执行代码。

    wade
  • react入门(四):组件生命周期

    componentWillReceiveProps shouldComponentUpdate componentWillUpdate componentDid...

    柴小智
  • 深入理解es6的promise

    我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?inv...

    连小壮
  • es6之深入理解promise对象

    连小壮
  • 前端MVC Vue2学习总结(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例

    使用vue-cli可以规范项目,提高开发效率,但是使用vue-cli时需要一些ECMAScript6的知识,特别是ES6中的模块管理内容,本章先介绍ES6中的基...

    张果
  • 前端MVC Vue2学习总结(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例

    使用vue-cli可以规范项目,提高开发效率,但是使用vue-cli时需要一些ECMAScript6的知识,特别是ES6中的模块管理内容,本章先介绍ES6中的基...

    张果

扫码关注云+社区

领取腾讯云代金券