Javascript立即执行函数(IIFE)实例详解

在Javascript中，立即执行函数指的是定义完函数后立即自动调用该函数，避免了函数命名污染全局变量的问题，同时可以更好地保护函数内部的变量隐私和封装性。下面就是关于Javascript立即执行函数的详细攻略。

什么是Javascript立即执行函数

Javascript立即执行函数的定义格式如下：

(function () {
  // code
})();

立即执行函数主要由两部分构成：

1. use strict：开启严格模式，提升代码运行效率和安全性。

2. 匿名函数：立即定义好一个匿名函数，并且紧接着就调用它。

匿名函数内的代码存储在一个独立的作用域中，在函数执行完成后立即销毁该作用域中的变量和引用，避免了在全局作用域中创建变量和函数命名带来的在复杂系统中产生问题的风险。

Javascript立即执行函数的作用

Javascript立即执行函数的作用主要有以下几个：

1. 避免函数命名污染全局变量：使用立即执行函数可以避免在函数内部定义的变量和函数姓名污染全局变量，从而提高代码的可读性和可维护性。

2. 实现模块化开发：Javascript立即执行函数将方法和变量封装在私有作用域内，只暴露出必要的接口，可以实现模块化开发的目的。

3. 函数作用域内的变量保护：Javascript立即执行函数中定义的变量仅在函数体内生效，外部无法访问，从而实现变量保护的目的。

Javascript立即执行函数的示例

示例1：函数命名污染导致变量冲突

假设我们有一个网站需要用到以下的JS代码：

function sayHello() {
  alert('Hello World');
}

function sayGoodbye() {
  alert('Goodbye');
}

当我们引入多个JS文件时，每个JS都可能定义一些全局函数，很容易导致函数名称的冲突和变量污染，不利于系统的后期维护。

示例2：使用立即执行函数解决变量污染问题

通过改进后的代码，我们可以使用立即执行函数来避免函数命名污染的问题。

(function () {
  function sayHello() {
    alert('Hello World');
  }

  function sayGoodbye() {
    alert('Goodbye');
  }

  // 可以在此处调用一些内部函数或变量来实现其他逻辑
})();

在这个例子中，通过使用立即执行函数，将sayHello和sayGoodbye函数作为私有变量存储在函数作用域内，并且这些函数不会与其他JS文件中定义的同名函数发生冲突。

通过这个简单的示例，我们可以看到Javascript立即执行函数的巨大作用，可以避免命名污染、实现模块化开发、保护变量等目的。