意译:自调用函数表达式

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

一、写在前面

  本文将一如既往地遵循从自身理解出发,而非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');
}());
时间: 2024-11-03 18:07:02

意译:自调用函数表达式的相关文章

JavaScript中函数声明与函数表达式的区别详解_javascript技巧

前言 在ECMAScript中,有两个最常用的创建函数对象的方法,即使用函数表达式或者使用函数声明.对此,ECMAScript规范明确了一点,即是,即函数声明 必须始终带有一个标识符(Identifier),也就是我们所说的函数名,而函数表达式则可以省略.下面看看这两者的详细区别介绍. 什么是 Function Declaration(函数声明)? Function Declaration 可以定义命名的函数变量,而无需给变量赋值.Function Declaration 是一种独立的结构,不能

函数声明和函数表达式——函数声明的声明提前

定义函数的方法 定义函数的方法主要有三种:     函数声明(Function Declaration)     函数表达式Function Expression)     new Function构造函数 其中,经常使用的是函数声明和函数表达式的函数定义方法,这两种方法有着很微妙的区别和联系,而且这两种方法的使用也容易混淆,所以这篇文章主要总结下这两种函数定义方法的相关知识点,当然本文的主题依然是关于函数提前的. 函数声明的典型格式: function functionName(arg1, a

JS创建函数:函数声明和函数表达式

文章简介:JavaScript 中需要创建函数的话,有两种方法:函数声明.函数表达式. JavaScript 中需要创建函数的话,有两种方法:函数声明.函数表达式,各自写法如下: // 方法一:函数声明function foo() {} // 方法二:函数表达式var foo = function () {}; 另外还有一种自执行函数表达式,主要用于创建一个新的作用域,在此作用域内声明的变量 不会和其它作用域内的变量冲突或混淆,大多是以匿名函数方式存在,且立即自动执行: (function ()

Javascript中函数声明与函数表达式的区别

Js中的函数声明是指下面的形式: function functionName(){ } 这样的方式来声明一个函数,而函数表达式则是类似表达式那样来声明一个函数,如: var functionName = function(){ } 可能很多朋友在看到这两一种写法时会产生疑惑,这两种写法差不多,在应用中貌似也都是可行的,那他们有什么差别呢? 事实上,js的解析器对函数声明与函数表达式并不是一视同仁地对待的.对于函数声明,js解析器会优先读取,确保在所有代码执行之前声明已经被解析,而函数表达式,如同

JavaScript中的函数声明和函数表达式区别浅析

 这篇文章主要介绍了JavaScript中的函数声明和函数表达式区别浅析,本文总结的浅显易懂,非常好的一篇技术文章,需要的朋友可以参考下     记得在面试腾讯实习生的时候,面试官问了我这样一道问题. 代码如下: //下述两种声明方式有什么不同 function foo(){}; var bar = function foo(){};   当初只知道两种声明方式一个是函数声明一个是函数表达式,具体有什么不同没能说得很好.最近正好看到这方面的书籍,就想好好总结一番. 在ECMAScript中,有两

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

 这篇文章主要介绍了JavaScript中的立即执行函数表达式介绍,本文着重讲解了什么是立即调用函数表达式,需要的朋友可以参考下     我们习惯看到这样的匿名函数 代码如下: (function(){ console.log("test"); })(); 之前一直叫的是自执行的匿名函数(self-executing anonymous function)   发现原来还有一种叫法是: 立即调用函数表达式 (IIFE,Immediately-Invoked Function Expre

浅析javascript中函数声明和函数表达式的区别

这篇文章主要介绍了浅析javascript中函数声明和函数表达式的区别,需要的朋友可以参考下     javascript中声明函数的方法有两种:函数声明式和函数表达式. 区别如下: 1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的. 2).以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用. 3).以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者

qlikview-qilkview 函数表达式不会写 sum(APPL_STATUS = 01)

问题描述 qilkview 函数表达式不会写 sum(APPL_STATUS = 01) sum(APPL_STATUS = 01) APPL_STATUS是申请状态有01 ,02 ,03 等等,我要分别统计出他们的个数,写了这个表达式结果是负数,有大神知道吗? 解决方案 试试count函数,同时01是字符串的话最好双引号引起来

详解JavaScript中的函数声明和函数表达式_java

JavaScript 中需要创建函数的话,有两种方法:函数声明.函数表达式,各自写法如下: // 方法一:函数声明 function foo() {} // 方法二:函数表达式 var foo = function () {}; 另外还有一种自执行函数表达式,主要用于创建一个新的作用域,在此作用域内声明的变量不会和其它作用域内的变量冲突或混淆,大多是以匿名函数方式存在,且立即自动执行: (function () { // var x = ... })(); 此种自执行函数表达式归类于以上两种方法