JavaScript 立即执行函数

什么是立即执行函数？

立即执行函数表达式（Immediately Invoked Function Expression，简称IIFE，读作"iffy"）是在JavaScript中一种常见的设计模式，它允许你定义一个函数并立即执行它，而不需要单独调用。

IIFE的基本语法是将函数定义包裹在括号中，然后再添加一对括号来立即调用这个函数：

js

(function() {
  // 函数体内的代码
  console.log('这个函数会被立即执行！');
})();
// 输出: 这个函数会被立即执行！

IIFE的基本语法形式

立即执行函数有两种常见的语法形式：

1. 函数表达式后跟调用括号

js

(function() {
  console.log('第一种形式');
})();
// 输出: 第一种形式

2. 调用括号包含在外层括号内

js

(function() {
  console.log('第二种形式');
}());
// 输出: 第二种形式

备注

这两种形式在功能上完全相同，只是写法不同。选择哪种主要取决于个人或团队的编码风格。

为什么需要立即执行函数？

立即执行函数主要解决以下几个问题：

1. 创建私有作用域

在ES6之前，JavaScript没有块级作用域，只有函数作用域。IIFE可以创建一个临时的作用域，避免变量污染全局命名空间：

js

// 全局变量
var name = "全局名称";

// IIFE创建的私有作用域
(function() {
  var name = "私有名称";
  console.log(name); // "私有名称"
})();

console.log(name); // "全局名称" - 不受IIFE内部变量影响

2. 模块化代码

IIFE可以用来实现简单的模块模式：

js

var calculator = (function() {
  // 私有变量
  var result = 0;
  
  // 返回公共API
  return {
    add: function(n) {
      result += n;
      return this;
    },
    subtract: function(n) {
      result -= n;
      return this;
    },
    getResult: function() {
      return result;
    }
  };
})();

// 使用模块
calculator.add(5).subtract(2);
console.log(calculator.getResult()); // 输出: 3

3. 保护变量不受外部影响

js

(function() {
  var counter = 0;  // 这个变量在IIFE外部无法访问
  
  function incrementCounter() {
    counter++;
    console.log(counter);
  }
  
  incrementCounter(); // 输出: 1
  incrementCounter(); // 输出: 2
})();

// 尝试访问IIFE内部变量会导致错误
// console.log(counter); // ReferenceError: counter is not defined

IIFE的高级用法

带参数的IIFE

IIFE可以接收参数，就像普通函数一样：

js

(function(message, times) {
  for(let i = 0; i < times; i++) {
    console.log(message);
  }
})("Hello IIFE!", 3);

// 输出:
// Hello IIFE!
// Hello IIFE!
// Hello IIFE!

返回值的IIFE

IIFE可以返回值，这在创建单例模式或模块时特别有用：

js

var singleton = (function() {
  // 私有变量和方法
  var privateVariable = "I am private";
  
  function privateMethod() {
    return "This is a private method";
  }
  
  // 返回一个包含公共方法的对象
  return {
    publicVariable: "I am public",
    publicMethod: function() {
      return "This is a public method that can access " + privateVariable;
    },
    accessPrivateMethod: function() {
      return privateMethod();
    }
  };
})();

console.log(singleton.publicVariable); // 输出: "I am public"
console.log(singleton.publicMethod()); // 输出: "This is a public method that can access I am private"
console.log(singleton.accessPrivateMethod()); // 输出: "This is a private method"

箭头函数IIFE

在ES6中，我们也可以使用箭头函数来创建IIFE：

js

(() => {
  console.log("这是一个使用箭头函数的IIFE");
})();

// 输出: 这是一个使用箭头函数的IIFE

实际应用场景

1. 避免全局变量污染

在编写库或插件时，我们通常会将所有代码包裹在IIFE中，以避免污染全局命名空间：

js

// jQuery插件示例
(function($) {
  $.fn.myPlugin = function() {
    // 插件实现...
    return this.each(function() {
      console.log("应用插件到元素");
    });
  };
})(jQuery);

// 使用: $('div').myPlugin();

2. 模块化设计

实现一个简单的计数器模块：

js

var counterModule = (function() {
  var counter = 0; // 私有变量
  
  return {
    increment: function() {
      return ++counter;
    },
    decrement: function() {
      return --counter;
    },
    getValue: function() {
      return counter;
    },
    reset: function() {
      counter = 0;
      return counter;
    }
  };
})();

console.log(counterModule.increment()); // 1
console.log(counterModule.increment()); // 2
console.log(counterModule.getValue());  // 2
console.log(counterModule.decrement()); // 1
console.log(counterModule.reset());     // 0

3. 一次性初始化

当我们需要执行一些一次性的初始化工作时：

js

(function initApp() {
  // 检查浏览器兼容性
  const isMobile = /Mobile|Android|iOS|iPhone|iPad|iPod/i.test(navigator.userAgent);
  
  // 设置应用配置
  window.APP_CONFIG = {
    isMobile: isMobile,
    apiEndpoint: isMobile ? 'mobile-api.example.com' : 'api.example.com',
    lastInitialized: new Date().toISOString()
  };
  
  console.log('应用初始化完成：', window.APP_CONFIG);
})();

IIFE与闭包

IIFE经常与闭包结合使用，创建强大的设计模式：

js

var createCounter = function(initialValue) {
  return (function() {
    var counter = initialValue || 0;
    
    return {
      increment: function() {
        return ++counter;
      },
      get: function() {
        return counter;
      },
      reset: function() {
        counter = initialValue || 0;
        return counter;
      }
    };
  })();
};

var counterFrom5 = createCounter(5);
var counterFrom10 = createCounter(10);

console.log(counterFrom5.increment()); // 6
console.log(counterFrom5.increment()); // 7
console.log(counterFrom10.get());      // 10
console.log(counterFrom10.increment()); // 11
console.log(counterFrom5.get());       // 7

IIFE与现代JavaScript

随着ES6的普及，我们有了更多替代IIFE的方法：

js

// 传统IIFE
(function() {
  var x = 10;
  // 其他代码...
})();

// ES6使用块级作用域
{
  let x = 10;
  // 其他代码...
}

提示

虽然现代JavaScript提供了块级作用域（通过let和const），但IIFE仍然在某些场景下非常有用，特别是在需要创建闭包或模块模式时。

最佳实践

1. 明确的命名：即使IIFE是匿名的，也可以为它命名以便于调试：

js

(function initializeApp() {
  // 函数体...
})();

2. 将全局对象作为参数传递：这样可以在压缩代码时节省字节：

js

(function(window, document, $) {
  // 现在可以直接使用window、document和jQuery
})(window, document, jQuery);

3. 保持简单：IIFE应该专注于单一职责，避免过于复杂的逻辑。

4. 考虑现代替代方案：在新项目中，考虑使用ES模块而不是IIFE来组织代码。

总结

立即执行函数是JavaScript中一个强大的模式，它可以：

1. 创建隔离的作用域，防止变量污染全局命名空间
2. 实现模块模式，封装私有变量和方法
3. 提供一种组织和结构化代码的方法

虽然随着ES6及更高版本的JavaScript的普及，IIFE的一些用例可以被其他方法替代（如模块系统和块级作用域），但理解IIFE仍然是掌握JavaScript核心概念的重要部分，尤其是在阅读和维护旧代码时。

练习题

1. 创建一个IIFE，计算并返回1到10的和。
2. 实现一个使用IIFE的计数器，每次调用都会递增并返回当前计数。
3. 创建一个Todo List模块，使用IIFE实现添加任务、完成任务、列出所有任务的功能。

进一步学习资源

• MDN Web Docs: IIFE
• 探索JavaScript设计模式，特别是模块模式和揭示模块模式
• 阅读流行JavaScript库（如jQuery）的源码，了解IIFE在实际项目中的应用

通过掌握立即执行函数，你将拥有一个强大的工具，可以编写更清晰、更模块化、更易于维护的JavaScript代码。