这个章节要来讨论立即函式(IIFE)

根据上个章节我们讲到，函式陈述式必须要具名，才能够被调用。

函式表达式，无论具不具名，也必须要有变数乘装才能够透过 变数名称 + () 进行调用、呼叫。

function FnA () {    console.log('something');}FnA();

那么立即函式呢?

立即函式无论具不具名都没差，他在被浏览器阅读的当下，就会立刻执行 {} 内的程式码片段。

而写法则有两种

(function () {    console.log('第一种，小括号在函式结尾的后面');}());(function() {    console.log('第二种，小括号在外面');})();

只要位于立即函式的 {} 中间的程式码片段都会立即执行。

并且要记得，立即函式的最后一定要加 ;，不然 ASI 会误以为是一行而报错，中断 javascript 的直译过程。

立即函式(IIFE)的重点

(function IIFE (){    console.log('立即函式(IIFE)');})()console.log(IIFE);

因为 console.log(IIFE); 在立即函式外执行所以报错。

这也是立即函式的一个特点喔~!!!

透过立即函式来限制变数的作用域

(function () {    var Ming = '小明';    console.log(Ming); // 小明})();console.log(Ming); // not define

所以可以看到，在立即函式内宣告的变数，也就是区域变数是无法在外部做呼叫的，这个观念也符合函式的观念。

但是有时候我们也想要像一般函式一样，传参数进入到立即函式的环境中，该怎么传呢?

传参数到立即函式中

var arg = '我是参数';(function (parameter) {    var Ming = '小明';    console.log(Ming + parameter); // 小明我是参数})(arg);

利用最后面的小括号带入想要传入的参数类型，并且在 立即函式的 function () 小括号设定接受的变数名称，就可以接收到传进立即函式的变数瞜。

立即函式回传值

同样的，立即函式也可以 return 一个回传值喔!

var whereMing = (function (where) {    console.log('where', where);    return where;})('小明在西门');console.log(whereMing); // 小明在西门

立即函式之间的共同变数沟通

主要有两种方法

方法1: 全域变数

var a = {};(function (b) {    b.person = '小明';})(a);(function (c) {    console.log(c.person); // 小明})(a);

方法1: 全域属性

(function (global) {    global.person = '小明';})(window);(function () {    console.log(person); // 小明})();

当我们将 window 传进去的时候，就代表我们对window 新增的属性 person 可以在别的 IIFE 中被调用，因此第二个 IIFE 不需要传入任何参数就可以取用到 window 的 person 属性。

这两种方式都是透过全域的变数、或是属性来完成资料的传递。

这种方法也多半都用于大型的框架、像是 Vue、React 等。

以上就是关于立即函式的介绍，如果没有问题就可以继续往下一篇文章前进噜。

希望对大家有帮助~汪汪!