JavaScript函数IIFE使用详解

IIFE（Immediately Invoked Function Expression）是一种用于创建局部作用域的函数，也被称为自执行函数。它是一种简单的编程技巧，使用它能够有效地防止全局变量被污染，同时也能方便地访问全局变量。

IIFE的基本语法

IIFE 的基本语法如下：

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

上面的语法中，函数用小括号包裹起来，紧接着跟着一个立即执行的小括号，这样就实现了 IIFE 的调用，函数会立即执行。函数内部可以定义任意的变量与函数，这些变量与函数都是私有的，只能在函数内部访问。

优点

使用 IIFE 的主要优点有：

避免全局变量污染：IIFE 中定义的变量是局部的，不会影响全局变量的作用域。
隔离作用域：在 IIFE 中定义的变量，只能在 IIFE 内部访问，从而保护变量不受外部的干扰。
减少全局变量的使用：使用 IIFE 可以减少全局变量的使用，从而提高代码的健壮性。
避免命名冲突：在 IIFE 中定义的变量名称不会与全局变量和其他函数冲突，从而避免命名冲突。

IIFE的应用场景

IIFE 可以应用在以下几个场景中：

定义一个命名空间
隐藏实现细节
隔离模块的作用域
编写闭包
构建插件系统

示例一：实现私有变量和私有方法

下面的示例使用 IIFE 和闭包实现了一个累加器，其中 count 是一个私有变量，add 是一个私有方法，只能在 IIFE 内部访问：

var adder = (function() {
    var count = 0;
    function add(num) {
        count += num;
    }
    return {
        getCount: function() {
            return count;
        },
        increment: function() {
            add(1);
        },
        decrement: function() {
            add(-1);
        }
    };
})();

adder.increment();
console.log(adder.getCount()); // 1

adder.decrement();
console.log(adder.getCount()); // 0

在这个示例中，IIFE 定义了一个名为 adder 的对象，并返回了一个带有三个方法的对象字面量。其中的 getCount 方法用于返回计数器的值，increment 和 decrement 方法分别用于加 1 或减 1。

示例二：防止全局变量被污染

下面的示例演示了一个简单的计数器，使用 IIFE 中的变量来避免全局变量的使用：

(function() {
    var count = 0;
    document.getElementById('btn').addEventListener('click', function() {
        count++;
        document.getElementById('counter').innerHTML = count;
    });
})();

在这个示例中，IIFE 定义了计数器的逻辑，并使用了闭包来保护 count 变量。由于 count 是 IIFE 中的变量，因此不会对外部产生任何影响。