详解JS中的立即执行函数

详解JS中的立即执行函数

在JS中，立即执行函数（Immediately Invoked Function Expression，IIFE）是一种常见的函数调用方式。IIFE有许多不同的应用场景，例如定义模块、创建私有作用域等。本文将详细讲解IIFE的语法和使用场景，并提供两个示例说明。

语法

IIFE的基本语法如下：

(function () {
  // 这里是代码块
})();

在上面的代码中，IIFE定义了一个匿名函数，并立即将其执行。由于函数是匿名的，它无法被外部访问。这样可以确保函数内部的变量和函数不会污染全局作用域。

使用场景

模块定义

IIFE可以用来定义模块，将模块的代码封装在私有作用域中。这样，模块内部的变量和函数将不会与全局变量发生命名冲突。例如：

var module = (function () {
  var privateVar = '这是私有变量';

  function privateFunc() {
    console.log('这是私有函数');
  }

  return {
    publicFunc: function () {
      console.log('这是公有函数');
    },
    publicVar: '这是公有变量',
  };
})();

module.publicFunc(); // 这是公有函数
console.log(module.publicVar); // 这是公有变量
console.log(module.privateVar); // undefined
module.privateFunc(); // TypeError: module.privateFunc is not a function

在上面的例子中，IIFE定义了一个module对象，该对象具有公有变量、公有函数和私有变量、私有函数。因为私有变量和函数只在IIFE内部可访问，所以对外部来说是不可见的。

避免变量声明提升

JS中存在变量声明提升的问题，即变量声明会被提升到作用域的顶部。使用IIFE可以避免这个问题，可以将变量的声明和初始化封装在函数内部。例如：

(function () {
  var name = '小明';

  function sayHi() {
    console.log('大家好，我是' + name);
  }

  sayHi();
})();

在上面的例子中，变量name和函数sayHi都在IIFE内部定义。因为它们是函数内部的局部变量和函数，所以它们不会被声明提升到全局作用域。

示例说明

示例一：打印1-10的数字

在这个示例中，我们将使用IIFE打印数字1-10。我们可以将计数器变量封装在IIFE的内部，以便于对全局作用域中的变量进行封装。

(function () {
  for (var i = 1; i <= 10; i++) {
    (function (j) {
      setTimeout(function () {
        console.log(j);
      }, j * 1000);
    })(i);
  }
})();

在上面的代码中，我们使用了两个嵌套的函数，一个是外部的循环，另一个是立即执行函数。在循环中，我们通过将计数器变量的值传递给立即执行函数的形参来封装变量。然后，我们使用setTimeout函数在每个数字之间添加一秒延迟，并打印每个数字。

示例二：避免变量声明提升

在这个示例中，我们将使用IIFE避免函数内部变量的声明提升。

(function () {
  var name = '小明';

  function sayHi() {
    console.log('大家好，我是' + name);
  }

  sayHi();
})();

在上面的代码中，我们将变量name和函数sayHi封装在IIFE中，这样它们就只能在IIFE函数内部访问。由于它们是私有的，并且在IIFE中声明和初始化，因此它们不会被提升到全局作用域中。这样，我们就可以避免变量声明提升的问题。