Javascript 立即执行函数

举报
搞前端的半夏 发表于 2022/01/30 22:53:17 2022/01/30
【摘要】 IIFE,一般称为立即执行函数。你可能会问我,*“嘿!我知道正常的函数表达式是什么样子的,但是 IIFE 到底是什么?”。*好吧,这正是我今天要在本文中回答的问题。 函数表达式在了解立即调用函数表达式之前,让我们快速回顾一下 JavaScript 中的普通函数表达式是什么样的。function(){ return ;}这就是我们通常在 JavaScript 中编写函数的方式。function...

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

函数表达式

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

function(){
 return ;
}

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

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

ArrowFn(()=>{

})
let ArrowFn=()=>{
}

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

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

ArrowFn()

立即执行函数

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

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

函数表达式:到目前为止,我们已经研究过它们!

如果我们了解整个情况:

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

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

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

代码4.png

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

以下是将普通函数转换为 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

代码7.png

**

  • 与其他函数类似,IIFE 也可以命名或匿名,但即使 IIFE 确实有名称,也不可能引用/调用它。
  • IIFE 有自己的范围,即您在函数表达式中声明的变量在函数之外将不可用。
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。