详解javascript立即执行函数表达式IIFE

标题：详解JavaScript立即执行函数表达式（IIFE）

JavaScript中的立即执行函数表达式（IIFE）可以防止变量污染和全局作用域污染。在本文中，我们将介绍IIFE的原理、用途和示例。

1. IIFE的原理

IIFE是一种JavaScript语言的常见模式，通过使用函数作用域来创建私有作用域，避免了变量和函数名在全局作用域中被污染，从而更好地进行模块化开发。

IIFE的原理很简单，即创建一个函数，并立即调用它。这个函数可以是匿名函数或带有名称的函数。当我们使用IIFE时，函数内部的变量和函数定义都只在函数内部可见。

下面是一个基本的IIFE示例：

(function() {
   // 这里是私有作用域
})();

2. IIFE的用途

IIFE具有多种用途，包括：

2.1 避免变量和函数污染全局作用域

IIFE可以避免全局作用域上的变量和函数的污染。例如：

(function() {
   var i = 1;
   function test() {
       console.log(i);
   }
   test();
})();

其中变量i和函数test都在IIFE内部定义，因此不会污染全局作用域。

2.2 模块化JavaScript代码

IIFE可以用于模块化JavaScript代码。对于大型JavaScript应用程序，代码模块化是必要的，以便于维护和测试。例如：

var myModule = (function() {
   var i = 1;
   function test() {
       console.log(i);
   }
   return {
       test: test
   }
})();
myModule.test(); // 输出1

在此示例中，我们定义了一个名为myModule的对象，并在IIFE内部定义了变量i和函数test。最后，我们从IIFE中返回了一个包含test函数的对象，并将其赋值给myModule变量。这样，我们就可以通过调用myModule.test函数来访问test函数。

3. 示例说明

下面我们将展示IIFE的两个示例。

3.1 示例1：实现命名空间

命名空间是一种管理代码模块化的技术，在JavaScript中，我们可以使用IIFE来实现命名空间。例如：

var myApp = myApp || {};
(function() {
   var i = 1;
   function test() {
       console.log(i);
   }
   myApp.test = test;
})();
myApp.test(); // 输出1

在此示例中，我们创建了一个全局变量myApp，并在IIFE内部定义了变量i和函数test。最后，我们将test函数添加到myApp对象中，并通过myApp.test()来访问它。

3.2 示例2：与jQuery一起使用

jQuery是一个流行的JavaScript库，它提供了许多有用的功能和插件。我们可以使用IIFE来避免与jQuery中的全局变量和函数产生冲突。例如：

(function($) {
   // 在这里可以使用$作为jQuery对象的别名
   // ...
})(jQuery);

在此示例中，我们将jQuery对象作为参数传递给IIFE，并将其作为$形参引用。这样我们就可以在IIFE内部使用$别名来访问jQuery对象，而无需担心全局作用域冲突。

结论

IIFE是一种非常实用的JavaScript模式，可以避免功能和变量之间的污染。在JavaScript开发中使用IIFE来模块化代码和实现命名空间是非常有帮助的。