理解立刻执行函数（IIFE）的构造原理、运行机制

立刻执行函数（Imdiately Invoked Function Expression）到底是什么意思呢？

顾名思义：在该函数定义之后立即被执行的函数。

许多小伙伴应该和我有同样的想法：这不很好操作嘛？操作如下：

function(){//函数体
}()
//确实符合先定义-function(){}，再调用-后面加（）

运行结果：报错！----------->（为啥呢？，先定义函数然后调用......问题出现在哪儿了？）

下面就和大家一起探索一下“function和JavaScript引擎解析”之间的奇妙关系~

function关键字，既可以用作语句，也可以用作表达式。如果不加以区分或限定，代码在解析时，就会“不知所措”，分不清是当作语句，还是当作表达式来处理。为了避免这种歧义的产生，JS引擎规定，如果function关键字出现在一行代码的最前部，一律解析为语句。

看到这里，小伙伴应该已经明白上述代码块的报错原因了，可以看到function关键字位于行首，所以JS引擎直接将其当作语句处理,误认为只是函数定义，并不会对此函数产生调用行为。

分不清函数语句和函数表达式的童靴，可以看我的另一篇CSDN博客:

解决方法：

可以用一对括号将整个函数包裹起来，这样function就不在行首了，JS引擎会将其解析为表达式。

括号的使用方法有两种：

//第一种方法，用括号将函数的定义部分包裹起来,再进行调用
(function(){console.log('于臭臭需要于香香');
})()//第二种方法，用括号将函数的定义和调用都包裹起来
(function(console.log('于香香需要于臭臭');
){}())

那么除了用圆括号包裹的形式，能不能用其他符号代替呢？答案是：可以。

//行首添加~符号
~function(){//函数体
}();//行首添加+符号
+function(){//函数体
}();

除了上面显示的两个方式外，还有很多方式，但是作用的原理都是一样的，即：避免function出现在行首，要将function(){]转化为一个可以执行的表达式。虽然有众多的写法，但是用圆括号包裹的方法更加常见，也比较推荐。因为会让代码整体看来更加清晰、整洁。

立即执行函数的用途：

1. “环保性”：从此函数的声明和调用可以看出，我们不需要为函数命名，避免污染全局变量。

2. “私有性”：内部可以形成独立的作用域，将一些变量转化为私有变量，令外部无法访问。

思考题

请尝试运行以下代码，运行结果和你想象中的一样嘛？原因是什么呢？

<ul id="flist"><li>苹果</li><li>香蕉</li><li>榴莲</li><li>火龙果</li><li>荔枝</li>
</ul>
<script>var ul=document.getElementById("flist")var list = ul.getElementsByTagName('li');for (var i=0; i<list.length; i++){list[i].onclick = function (){alert(i); //打印出来的i是多少呢？}}
</script>

运行结果：5 应该有很多人认为结果应该是0，1，2，3，4

原因解释：i变量是作用于全局范围，并不是for循环每次执行都能得到一个独立的i变量，并没有和每次点击事件进行绑定。再考虑用户点击一定是在for循环完成之后进行的，这时变量已经变成5。

解决方法：思路很简单，只要尝试把i变成独立的变量，每次循环都能创建一个单独的作用域。因此立即执行函数的“私有性”特点能够解决这个问题。代码如下：

        for(var i=0; i<list.length; i++){(function (j){list[j].onclick = function (){alert(j);}})(i);}

除此之外，还有其他的方法，例如使用ES6的块级作用域。代码如下：

        for(let i=0; i<list.length; i++){list[i].onclick = function () {alert(i);}}

于臭臭生活日记——get抓壁虎技能（me-内心期盼壁虎顺利逃出狗爪 ⊙﹏⊙∥）！

理解立刻执行函数（IIFE）的构造原理、运行机制相关推荐

jacascript 立即执行函数(IIFE)与闭包
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 一直没搞清楚立即执行函数和闭包之间的关系,总结一下: 闭包有很多种理解:访问不到内部作用域,函数就是这样, ...
JavaScript重难点解析2（立即执行函数IIFE，this关键字）
JavaScript重难点解析2(立即执行函数IIFE,this关键字) 立即执行函数 this关键字立即执行函数也叫做匿名函数自调用,可以在定义一段函数之后直接让其执行. ;(function ...
立即执行函数(IIFE)的定义及用法
1.什么是IIFE IIFE是立即执行函数表达式,全称为Immediately-invoked function expression,是一种在避免全局命名和变量污染时常用的一种手法在ES5 ...
深入理解javascript中的立即执行函数(function(){…})()
2019独角兽企业重金招聘Python工程师标准>>> javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各 ...
js中(function(){…})()立即执行函数写法理解
js中(function(){-})()立即执行函数写法理解 javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法 ...
JavaScript中的立即执行函数
原文链接通常我们声明一个函数有以下几种方式: // 声明函数f1 function f1() {console.log("f1"); } // 通过()来调用此函数 f1();/ ...
JavaScript中立即执行函数实例详解转载作者：李牧羊
javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解.这篇文章 ...
js立即执行函数: (function ( ){...})( ) 与 (function ( ){...}( ))
( function(){-} )() ( function (){-} () ) 是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达 ...
JS-立即执行函数(function(){...})() amp;amp; (function(){...})()
在学习闭包的过程中遇到了(立即执行),之前见到(function(){...})() && (function(){...}())这种写法,就没有去知其所以然,也不会去写这种函数.所以 ...

理解立刻执行函数（IIFE）的构造原理、运行机制

于臭臭生活日记——get抓壁虎技能（me-内心期盼壁虎顺利逃出狗爪 ⊙﹏⊙∥）！

理解立刻执行函数（IIFE）的构造原理、运行机制相关推荐

最新文章

热门文章