关于javascript:前端开发立即执行函数function与function的区别

前言

在前端开发过程中，JS 中的原理应用知识点是陈词滥调，然而有时候在开发中会疏忽一些细节和不经意的知识点，尤其是刚入行的新晋开发者更是只知其一; 不知其二，在对 JS 整体应用的时候会有所脱漏。那么本篇博文就来分享一下对于在 JS 中立刻执行函数相干的比照应用总结，不便查阅应用。

什么是立刻执行函数

申明一个函数，而后立刻调用该函数，这时候的该函数就是一个立刻执行函数，换句话说就是申明函数当前立刻执行该函数就叫做立刻执行函数，即 IIFE (Immediately Invoked Function Expression)。通常立刻执行函数会以匿名函数的模式来申明，匿名函数的写法格局为 function(){}，即应用关键字 function 来申明函数，且未给该函数命名，然而匿名函数不能间接独自应用，须要应用小括号 () 包裹起来，不然就会报错。

立刻执行函数的作用

立刻执行函数的作用大略有三个方面：

1. 为了防止净化全局变量，申明函数不设置函数名；
2. 通过创立一个独立的作用域，使得作用域外面的变量等内容不被作用域之外拜访，防止申明的变量互相净化；
3. JS 常见的一个经典知识点，闭包的实现，还有数据私有化的设置。

语法

立刻执行函数的两种写法模式，如下所示：

// 写法一：用小括号把整个函数的定义和括号调用全副包裹起来
(function(){
// 函数体
...
}())

// 写法二：用小括号只把把函的数定义包裹起来，而后前面再加括号调用
(function (){
// 函数体
...
})()

须要留神的是：应用小括号包裹是因为浏览器的 JS 引擎规定要求，如果 function 放在首行，一律解析成语句，然而在应用立刻执行函数的时候须要浏览器的 JS 引擎把 function 解析为一个表达式，所以小括号包裹为的就是解决这个问题的。

函数理论写法场景

这里依照个别的一般函数和匿名函数的写法做一个简略的比照，一般函数和匿名函数按程序示意雷同的作用，具体比照如下所示：

1. 一般函数模式

• function bar(){console.log(“Hello JavaScript!”)}()// 在申明的函数前面间接加 () 会报错
• (function bar(){console.log(“Hello JavaScript!”)}())// 用小括号把整个函数表达式包起来就能够失常执行
• (function bar(){console.log(“Hello JavaScript!”)})()// 用小括号把函数包起来也能够失常执行
• !function bar(){console.log(“Hello JavaScript!”)}()// 应用！取反，只为了通过 JS 语法查看。
• +function bar(){console.log(“Hello JavaScript!”)}()// 应用 + 能够失常执行，只为了通过 JS 语法查看。
• -function bar(){console.log(“Hello JavaScript!”)}()// 应用 - 能够失常执行，只为了通过 JS 语法查看。
• ~function bar(){console.log(“Hello JavaScript!”)}()// 应用~ 能够失常执行，只为了通过 JS 语法查看。
• void function bar(){console.log(“Hello JavaScript!”)}()// 应用 void 能够失常执行，只为了通过 JS 语法查看。
• new function bar(){console.log(“Hello JavaScript!”)}()// 应用 new 能够失常执行，只为了通过 JS 语法查看。

2. 匿名函数模式

• (function(){console.log(“Anonymous Function!”)}())
• (function(){console.log(“Anonymous Function!”)})()
• !function(){console.log(“Anonymous Function!”)}()
• +function(){console.log(“Anonymous Function!”)}()
• -function(){console.log(“Anonymous Function!”)}()
• ~function(){console.log(“Anonymous Function!”)}()
• void function(){console.log(“Anonymous Function!”)}()
• new function(){console.log(“Anonymous Function!”)}()

下面一般函数和匿名函数的比照中，函数对于应用!、+、-、= 等运算符，都能让它们起到立刻执行的作用，使函数申明间接转换成了函数表达式，帮忙浏览器的 JS 引擎辨认它们是函数表达式，不是函数申明。

立刻执行函数传递参数

若立刻执行函数外面须要应用函数内部的变量，这就须要通过应用参数传递的形式来解决。在立刻执行函数外部应用的形参就是传递到函数外部的内部变量，进入立刻执行函数本人的作用域，且不受内部变量的影响。具体应用场景如下所示：

(function(a){
// 应用的形参就是传递到函数外部的内部变量
console.log(a)
})(b)

立刻执行函数的返回值

立刻执行函数和其余函数一样都是能够返回任意类型的值，次要是通过返回值来实现闭包的需要，具体示例如下所示：

var res = (function(){
var aaa = 123456;
return function() {return aaa;}
})()
// 该立刻执行函数的返回值是一个函数，所以须要通过 () 来调用即可
console.log(res()) // 输入后果为：123456

这里须要延长一下，立刻执行函数和闭包有一个独特长处就是能缩小全局变量的应用。然而它们也有不同之处，立刻执行函数只是函数的一种调用形式，在申明之后就立刻执行，该类函数个别都只调用一次，而且调用完之后会立刻销毁，不会占用内存；可是闭包次要让内部函数可能拜访外部函数的作用域，尽管也是缩小了全局变量的应用保障了外部变量的安全性，然而因被援用的外部变量不能被销毁，就增大了内存耗费，且使用不当很容易造成内存泄露。

(function(){}())与 (function(){})() 的区别

通过下面对于立刻执行函数的介绍，(function(){}())与 (function(){})() 的区别这个问题，是从不同角度来看的，然而从最终的后果来看，二者没啥区别，是一回事，得出该论断的根据就是 (function(){}()) 与(function(){})()的 AST 是雷同的，而且最初的后果都是一次性函数调用，以及最初解析器产生的后果也是统一的没啥区别，它们的性能也是雷同的：创立一个函数并且立刻调用执行。

最终的后果就是 ：(function(){}()) 与(function(){})()没有区别，它们是雷同的，不仅能够立刻执行函数，而且能够模仿块级作用域。

最初

通过下面介绍 (function(){}()) 与(function(){})()的区别总结，是不是彻底把握了相干知识点以及应用原理？这个知识点很重要，不论是在理论开发过程中还是在求职面试中，都是高频知识点，所以必须要彻底把握，尤其是对于 vue 初学者来讲更是要把握，这里不再过多赘述重要性。以上就是本章的全部内容，欢送关注三掌柜的微信公众号“程序猿 by 三掌柜”，三掌柜的新浪微博“三掌柜 666”，欢送关注！

本文参加了「SegmentFault 思否写作挑战赛」，欢送正在浏览的你也退出。