JavaScript中立即执行函数实例详解

前言

js立即执行函数可以让你的函数在创建后立即执行，js立即执行函数模式是一种语法，可以让你的函数在定义后立即被执行，这种模式本质上就是函数表达式(命名的或者匿名的)，在创建后立即执行。

( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法，最初我以为是一个括号包裹匿名函数，再在后面加个括号调用函数，最后达到函数定义后立即执行的目的，后来发现加括号的原因并非如此。

下面话不多说了，来一起看看详细的介绍吧。

通常我们声明一个函数有以下几种方式：

// 声明函数f1function f1() { console.log("f1");}// 通过()来调用此函数f1();//一个匿名函数的函数表达式，被赋值给变量f2:var f2 = function() { console.log("f2");}//通过()来调用此函数f2();//一个命名为f3的函数的函数表达式(这里的函数名可以随意命名，可以不必和变量f3重名)，被赋值给变量f3:var f3 = function f3() { console.log("f3");}//通过()来调用此函数f3();

如果你看过一些自定义控件的话你会发现他们大多数都是沿用这种写法：

(function() { ``` // 这里开始写功能需求 })(); 

这是我们常说的立即执行函数(IIFE)，顾名思义，也就是说这个函数是立即执行函数体的，不需要你额外去主动的去调用，一般情况下我们只对匿名函数使用IIFE，这么做有两个目的：

     一是不必为函数命名，避免了污染全局变量

     二是IIFE内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量。

如果看到这两句话无法理解，那么先从IIFE的运行原理说起。

因为IIFE通常用于匿名函数，这里就用简单的匿名函数作为栗子：

var f = function(){ console.log("f");}f();

我们发现这里f只是这个匿名函数的一个引用变量，那么既然f()能够调用这个函数，我把f替换成函数本身可以么：

function(){ console.log("f"); }();

运行之后得到如下结果：

Uncaught SyntaxError: Unexpected token (

产生这个错误的原因是，Javascript引擎看到function关键字之后，认为后面跟的是函数声明语句，不应该以圆括号结尾。解决方法就是让引擎知道，圆括号前面的部分不是函数定义语句，而是一个表达式，可以对此进行运算，这里区分一下函数声明和函数表达式：

1、函数声明(即我们通常使用function x(){}来声明一个函数)

function myFunction () { /* logic here */ }

2、函数表达式(类似以这种的形式)

var myFunction = function () { /* logic here */ };var myObj = { myFunction: function () { /* logic here */ }};