IIFE（立即执行函数表达式）详解-JavaScript中文网-JavaScript教程资源分享门户

IIFE（Immediately Invoked Function Expression）又称自执行匿名函数，是 JavaScript 中的一种常见代码模式。该模式提供了一种使函数调用过程更加隐蔽的方式，也可以用来创建封闭作用域。

什么是 IIFE

IIFE 是一种匿名函数，它能够立即执行。通常使用匿名函数立即调用，避免变量污染全局命名空间。下面是一个简单的 IIFE 示例：

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

IIFE 的作用

IIFE 的常见应用场景有：

1. 避免命名冲突

在 JavaScript 中，全局命名空间可以被污染。当多个 JavaScript 文件被加载到同一个页面上时，可能存在变量名冲突的情况。使用 IIFE 将代码封装到函数作用域中，可以避免变量污染全局命名空间。例如：

(function() {
  var name = "Bob";
  console.log(name); // "Bob"
})();
console.log(name); // ReferenceError: name is not defined

2. 封闭作用域

通过 IIFE 的方式可以创建函数作用域，封装私有变量。例如：

// javascriptcn.com 代码示例
var Counter = (function() {
  var count = 0;
  
  function increment() {
    count++;
  }
  
  function decrement() {
    count--;
  }
  
  function getCount() {
    return count;
  }
  
  return {
    increment: increment,
    decrement: decrement,
    getCount: getCount
  };
})();

console.log(Counter.getCount()); // 0
Counter.increment();
Counter.increment();
console.log(Counter.getCount()); // 2

3. 立即执行函数

IIFE 是一种立即执行函数，可以在定义之后立即执行。例如：

(function() {
  console.log("Hello, world!");
})();

如何编写 IIFE

使用 IIFE 的语法很简单，只需将函数定义包含在一对圆括号中，并在圆括号外部放置一对调用运算符圆括号即可。例如：

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

同时，也可以在函数定义前加上一元运算符，强制将该函数定义转换为表达式，防止意外的语法错误。例如：

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

IIFE 的最佳实践

IIFE 是一种常见的编码模式，但是如果不恰当使用或者使用不当，也会引起其他问题。下面是 IIFE 的一些最佳实践：

1. 使用 IIFE 包装代码

在开发过程中，我们通常把一个函数作为一个文件来组织代码。如果每个文件中都使用 IIFE 来包装这个函数，那么可以避免全局变量、函数、对象的冲突。例如：

// javascriptcn.com 代码示例
// file1.js
(function() {
  function foo() {
    // ...
  }
  
  // export
  window.foo = foo;
})();

2. 减小变量查找范围

在函数中创建变量需要从它们所在的作用域开始向上查找变量，这个过程可能影响代码性能。使用 IIFE 可以将这些变量移到局部变量中，从而减小查找范围，提高代码性能。例如：

(function() {
  var a = 1,
      b = 2,
      c = 3;
  
  // ...
})();

3. 立即运行需要新建的代码

IIFE 可以避免在不同的浏览器环境中，由于函数外部的参数名重复造成的命名冲突。例如：

(function(window) {
  var $ = window.jQuery;
  
  // ...
})(window);

总结

IIFE 是一种非常有用的技巧，用于创建一个独立作用域来保护代码，避免与全局命名空间、其他脚本以及其他 IIFE 之间产生冲突。同时，IIFE 也可以提供一种简单的方式来组织代码。在实际开发中，应该充分利用 IIFE 来提高代码的可维护性、代码性能以及代码的安全性。

示例代码

下面是一个 IIFE 示例代码：

// javascriptcn.com 代码示例
(function() {
  var name = "Bob";

  function sayHi() {
    console.log("Hi, " + name + "!");
  }

  function sayBye() {
    console.log("Bye, " + name + "!");
  }

  sayHi();
  sayBye();
})();

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6538b9ca7d4982a6eb1b4403