Javascript立即执行函数(IIFE)实例详解

前言

IIFE,一般称为立即执行函数。你可能会问我，*“嘿！我知道正常的函数表达式是什么样子的，但是 IIFE 到底是什么？”。*好吧，这正是我今天要在本文中回答的问题。

函数表达式

在了解立即调用函数表达式之前，让我们快速回顾一下 JavaScript 中的普通函数表达式是什么样的。

function(){
 return ;
}

这就是我们通常在 JavaScript 中编写函数的方式。function关键字，然后是函数名称，然后是函数体。

在ES6之后，我们还可以编写箭头函数，以及将箭头函数赋值给变量。

ArrowFn(()=>{
})

let ArrowFn=()=>{
}

通过上面的小例子，快速回顾了普通函数以及箭头函数的编写方式。下面我们介绍立即执行函数

重要的部分来了，为了调用上面的方法我们会怎么调用？你需要在任何你想要的地方显式地调用它。事实上，这就是我们首先编写普通函数表达式的主要原因。

ArrowFn()

立即执行函数

现在，我们了解了普通函数表达式在 JavaScript 中是如何工作的，让我们慢慢转向 IIFE。让我们尝试理解短语Immediately Invoked Functional Expressions。它的意思是：

立即调用：立即调用的东西。

函数表达式：到目前为止，我们已经研究过它们！

如果我们了解整个情况：

IIFE（立即调用函数表达式）是一个 JavaScript 函数，它在定义后立即运行。-MDN

所以，我们不需要显式调用这个函数来调用/运行它。它会在调用 JavaScript 文件后立即运行。IIFE 看起来像这样：

(function(){
 这里是函数体
})()

如果我们看语法本身，我们有两对闭括号，第一对包含要执行的逻辑，第二个通常是我们调用函数时包含的内容，第二个括号负责告诉编译器函数表达式必须立即执行。

以下是将普通函数转换为 IIFE 的方法

function consoleName(){
	console.log('hello 哈哈哈')
}
consoleName()

(function(){console.log('hello 哈哈哈')})()

请注意，我们不需要对 IIFE 的显式调用。此外，这些只是匿名函数，因为它们不需要函数名。如果你愿意，你也可以给它命名。它们甚至也可以是箭头函数！

当然了，立即执行也接受参数，下面是一个小栗子：

function consoleName(name){
	console.log('hello '+ name)
}
consoleName('哈哈哈')

(function(name){console.log('hello '+name)})("哈哈哈")

IIFE 的特征/行为

• IIFE 像 JavaScript 中的任何其他函数/变量一样遵循自己的范围。立即调用的名称部分有时会使新开发人员感到困惑，因为他们希望 IIFE 执行而与函数范围无关，这是错误的。例如，让我们看下面的示例，其中 IIFE 是在函数中定义的，并且只有在我们调用父函数时才会立即调用。

  function fn(){
  	console.log("A");
  	(()=>{
  		console.log("B")
  	})()
  	console.log("C")
  }

  输出结果是A B C

• 与其他函数类似，IIFE 也可以命名或匿名，但即使 IIFE 确实有名称，也不可能引用/调用它。

• IIFE 有自己的范围，即您在函数表达式中声明的变量在函数之外将不可用。

附：IIFE的参数

在前面提了一下IIFE的参数传递，直接上代码：

var mymodule= {};
(function(window, MyModule, undefined){
    //代码
})(window, mymodule);

参数分为形参和实参。function(window, MyModule, undefined)三个参数为形参，第二个括号(window, mymodule)的两个参数为实参。也即可以理解为 window == window，MyModule== mymodule。

普通形参

普通形参是指由window和wall这样的实际变量传入指定，可以为任何类型的变量。一个形参就对应一个实参

特殊形参undefined

大家都知道，IE是个神奇的浏览器，尤其是早期版本。比如说IE6这玩意儿，它居然功能强大到可以修改undefined，如果undefined被修改以，那么下面这类代码就玩不转了：

if(mymodule == undefined){
 //永远也进不来了
}

所以这个地方多加一个形参，就可以避免这个坑，在IIFE作用域中就能正常的获取到undefined了。

同时，它也有助于代码的压缩，减小文件的大小。

总结

到此这篇关于Javascript立即执行函数的文章就介绍到这了,更多相关JS立即执行函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！