一 什么是立即执行函数表达式

立即执行函数表达式,其实也可以叫初始化函数表达式,英文名:IIFE,immediately-inovked-function expression。立即执行函数表达式就是在定义的时候就立即执行。

二 立即执行函数表达式的写法

1)写法一

 (function (a) {
console.log('The result is ' + a);
})(5);
// The result is 5

2)写法二

 (function (a) {
console.log('The result is ' + a);
}(5));
// The result is 5

三 立即执行函数表达式的特点

1)作用域隔离,避免污染全局的命名空间

通过定义一个匿名函数,创建了一个新的函数作用域,相当于创建了一个“私有”的命名空间,该命名空间的变量和方法,不会破坏污染全局的命名空间。如果想传给外部变量或者方法,通过给window上添加对应属性即可。

例如:Jquery插件就是将window传入,然后给window上添加了$属性。

2)执行完立即销毁

执行完后,内部的局部变量和整个函数会被销毁释放掉。

 (function add(a, b) {
console.log('The result is ' + (a + b));
return a + b;
}(5, 3)); add(4, 6); // The result is 8
// Uncaught ReferenceError: add is not defined

3)立即执行函数表达式不需要带函数名

如果带了函数名,则被自动忽略。

四 立即执行函数表达式的错误写法

下边会针对一些立即执行函数表达式的错误写法,深入说明其原因。

要很好的理解下边错误写法的原因,首先要了解:JavaScript中函数的定义方法;JavaScript中表达式。

1)错误写法一

下边的错误写法的原因:浏览器解析器遇到function开头的语句,认为这是一个函数定义,但发现该函数没有函数名,导致报错。

 function () {
console.log('The result is 1');
}(); // Uncaught SyntaxError: Unexpected token (

说明:为什么给上边示例代码添加一个圆括号,就可以执行并且不报错了?

这是因为添加圆括号后,就变成表达式。

我们都知道定义函数有两种方式:

 // 函数声明:使用function声明函数,并指定函数名
function add() {
console.log('The result is 1');
} // 函数表达式:使用function声明函数,但未指定函数名,将匿名函数赋予一个变量
var add = function() {
console.log('The result is 1');
};

因此立即执行函数表达式,就类似于给函数表达式方式定义的函数,只是在函数定义完添加了圆括号让该函数立即执行了。

根本的原因还是将一个函数定义,变成了一个表达式。这也是为什么叫立即执行函数表达式的原因。

让一个匿名函数变成一个表达式的方法很多:

 !function(){}();
+function(){}();
-function(){}();
~function(){}();
new function(){ /* code */ }
new function(){ /* code */ }() // 只有传递参数时,才需要最后那个圆括号。
……

2)错误写法二

 function add() {
console.log('The result is ' + a);
}(); // Uncaught SyntaxError: Unexpected token )

上边代码会被浏览器解析为如下样子:

 function add() {
console.log('The result is ' + a);
};
();

第一个分号前是一个完整的函数定义,没有问题;而第二个分号前的(),出现了语法报错。

注意:当我们给后边的那个圆括号中添加一个表达式后,就不会报错了。但注意add函数依然不会执行。

 function add() {
console.log('The result is 1');
}(2); // 上边等价于下边代码:一部分是函数声明,一部分是执行表达式。因此函数不会执行。
function add() {
console.log('The result is 1');
};
(2);

3)错误写法三

当有多个立即执行函数表达式时,一定要带分号:

 (function () {
console.log('this is IIFE 1');
}())
(function () {
console.log('this is IIFE 1');
}()) // VM80:4 Uncaught TypeError: (intermediate value)(...) is not a function

说明:不带分号会导致JavaScript执行器认为后边括号内容是前边括号内容的参数,而前边括号最终执行结果并不是一个函数。而下边代码就不会报错:

 (function () {
console.log('this is IIFE 1');
return function(a) {
console.log('this is IIFE 1 return');
}
}())
(function () {
console.log('this is IIFE 2');
}()) // this is IIFE 1
// this is IIFE 2
// this is IIFE 1 return

五 立即执行函数组成的闭包保存状态

 // 这个代码是错误的,因为变量i从来就没背locked住
// 相反,当循环执行以后,我们在点击的时候i才获得数值
// 因为这个时候i操真正获得值
// 所以说无论点击那个连接,最终显示的都是I am link #10(如果有10个a元素的话) var elems = document.getElementsByTagName('a'); for (var i = 0; i < elems.length; i++) { elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('I am link #' + i);
}, 'false'); } // 这个是可以用的,因为他在自执行函数表达式闭包内部
// i的值作为locked的索引存在,在循环执行结束以后,尽管最后i的值变成了a元素总数(例如10)
// 但闭包内部的lockedInIndex值是没有改变,因为他已经执行完毕了
// 所以当点击连接的时候,结果是正确的 var elems = document.getElementsByTagName('a'); for (var i = 0; i < elems.length; i++) { (function (lockedInIndex) { elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('I am link #' + lockedInIndex);
}, 'false'); })(i); } // 你也可以像下面这样应用,在处理函数那里使用自执行函数表达式
// 而不是在addEventListener外部
// 但是相对来说,上面的代码更具可读性 var elems = document.getElementsByTagName('a'); for (var i = 0; i < elems.length; i++) { elems[i].addEventListener('click', (function (lockedInIndex) {
return function (e) {
e.preventDefault();
alert('I am link #' + lockedInIndex);
};
})(i), 'false'); }

六 参考资料&内容来源

博客园:https://www.cnblogs.com/tomxu/archive/2011/12/31/2289423.html

SF:https://segmentfault.com/a/1190000003902899

百度:https://baijiahao.baidu.com/s?id=1627496475450434415&wfr=spider&for=pc

博客园:https://www.cnblogs.com/yanzp/p/6371292.html

【JavaScript专题】--- 立即执行函数表达式的更多相关文章

  1. (译)详解javascript立即执行函数表达式(IIFE)

    写在前面 这是一篇译文,原文:Immediately-Invoked Function Expression (IIFE) 原文是一篇很经典的讲解IIFE的文章,很适合收藏.本文虽然是译文,但是直译的 ...

  2. [转]Javascript中的自执行函数表达式

    [转]Javascript中的自执行函数表达式 本文转载自:http://www.ghugo.com/javascript-auto-run-function/ 以下是正文: Posted on 20 ...

  3. 详解javascript立即执行函数表达式(IIFE)

    立即执行函数,就是在定义函数的时候直接执行,这里不是申明函数而是一个函数表达式 1.问题 在javascript中,每一个函数在被调用的时候都会创建一个执行上下文,在函数内部定义的变量和函数只能在该函 ...

  4. 【JavaScript】浅析IIFE(立即执行函数表达式)的作用

    什么是IIFE IIFE就是立即执行函数表达式(Immediately-Invoked Function Expression) 为什么需要IIFE 应用IIFE有两个比较经典的使用场景, 第一就是在 ...

  5. 立即执行函数表达式(IIFE)

    原文地址:benalman.com/news/2010/11/immediately-invoked-function-expression/ 译者:nzbin 也许你还没有注意到,我是一个对术语比较 ...

  6. javascript立即调用的函数表达式N种写法(第二篇)

    原文:javascript立即调用的函数表达式N种写法(第二篇) 上一篇博客我谈到将函数声明转换为函数表达式最常见的一种写法是:通过括号()将匿名函数声明转换为函数表达式即(function(){}) ...

  7. JS立即执行函数表达式(IIFE)

    原文为 http://benalman.com/news/2010/11/immediately-invoked-function-expression/#iife ----------------- ...

  8. 理解JavaScript的立即调用函数表达式(IIFE)

    首先这是js的一种函数调用写法,叫立即执行函数表达式(IIFE,即immediately-invoked function expression).顾名思义IIFE可以让你的函数立即得到执行(废话). ...

  9. IIFE(立即执行函数表达式)

    我们经常会看到这样的写法: ;(fuction () { // do something })() 这就是一个简单的IIFE(立即执行函数表达式,immediately-invoked functio ...

随机推荐

  1. 【Javascript 基础】使用数组

    Javascript 数组的工作方式与大多数编程语言的数组类似. <!DOCTYPE html> <html lang="en"> <head> ...

  2. C++11之右值引用(二):右值引用与移动语义

    上节我们提出了右值引用,可以用来区分右值,那么这有什么用处?   问题来源   我们先看一个C++中被人诟病已久的问题: 我把某文件的内容读取到vector中,用函数如何封装? 大部分人的做法是: v ...

  3. react-native 常用组件的用法(二)

    ScrollView组件 能够调用移动平台的ScrollView(滚动视图)的组件,同时还集成了触摸锁定的“响应者”系统.注意一定要给scrollview一个高度,或者是他父级的高度. 常用方法 on ...

  4. 扩展Unity3D编辑器的脚本模板

      近期在学习Shader时感觉Shader语言參数众多.语法诡异,假设每次都从头開始写Shader一定是一件痛苦的事情.假设能够在本地定义好一组标准的Shader模板,这样当我们须要实现某些效果相似 ...

  5. HDU 3732 Ahui Writes Word(多重背包)

    HDU 3732 Ahui Writes Word(多重背包) http://acm.hdu.edu.cn/showproblem.php? pid=3732 题意: 初始有N个物品, 每一个物品有c ...

  6. Web用户的身份验证及WebApi权限验证流程的设计和实现(续)

    4.4 权限属性RequireAuthorizationAttribute [csharp] view plaincopy   "font-size:14px;">/// / ...

  7. 安装pydot及importError解决办法

    安装pydot: 需要先安装graphviz和pyparsing. 安装pydot过程曾出现“import error” 错误,主要是版本不兼容的问题.之后自己apt-get upgrade了一下,问 ...

  8. automaticallyAdjustsScrollViewInsets(UITextView文字顶部留有空白)

    iOS7新添加的UIViewController的属性automaticallyAdjustsScrollViewInsets 此属性默认为YES,这样UIViewController下如果只有一个U ...

  9. windows上IIS实现https,配置ssl证书

    windows2012实现IIS7的https 1.申请证书,这里申请腾讯云的证书 1)登录腾讯云控制台,依次单击“云产品”>“SSL证书管理”>“申请证书” 2)在免费证书申请页面填写相 ...

  10. linux下 apache启动、停止、重启命令

    假设你的apahce安装目录为/usr/local/apache2,这些方法适合任何情况 apahce启动命令:推荐/usr/local/apache2/bin/apachectl start apa ...