返回

立即执行函数的认知

前端

我们所说的立即执行函数英文是:immediately-invoked function expression,缩写:IIFE 翻译意思就是立即调用的函数表达式 为什么是函数表达式呢? 首先要知道函数声
明和函数表达式, 函数声明是 function + 函数名 + 函数体,而函数表达式则是 function 关键字 + 参数列表 + 函数体。立即执行函数的意思就是, IIFE 的声明和调用同时进行, 不需要单独调用函数了。

当然, 我们完全可以这么做:

function test() {
    console.log(1);
}
// 调用
test();

但是如果我们想把 test() 函数里的内容变成局部作用域, 不影响外面的作用域怎么办呢?就可以使用立即执行函数来做。

(function() {
    console.log(1);
})();

原理:

立即执行函数的原理很简单, 其实就是利用函数的作用域范围。当一个函数被执行时, 就会创建一个自己的执行上下文, 而这个执行上下文就成了函数的作用域。函数的作用域内, 我们可以访问到函数内部的变量和参数, 但是无法访问外部的作用域。

特点:

  • 局部作用域:IIFE 可以创建局部作用域, 将函数内部的变量和参数与外部的作用域隔离开来。
  • 隐私性:IIFE 还可以保护函数内部的变量和参数的隐私性, 使它们无法被外部的作用域访问到。
  • 避免污染全局作用域:IIFE 可以防止函数内部的变量和参数污染全局作用域, 使代码更加干净和易于维护。
  • 模块化:IIFE 可以将代码封装成独立的模块, 使代码更加易于复用和维护。

用法:

IIFE 的用法也很简单, 只需要在函数声明的前面加上一对小括号即可。

(function() {
    // 代码
})();

或者也可以使用圆括号来调用函数:

(function() {
    // 代码
}());

立即执行函数的优点:

  • 可以创建局部作用域, 将函数内部的变量和参数与外部的作用域隔离开来。
  • 可以保护函数内部的变量和参数的隐私性, 使它们无法被外部的作用域访问到。
  • 可以避免污染全局作用域, 使代码更加干净和易于维护。
  • 可以将代码封装成独立的模块, 使代码更加易于复用和维护。

立即执行函数的缺点:

  • 可能使代码更难以阅读和理解。
  • 可能导致命名冲突, 尤其是当在一个文件中使用了多个立即执行函数时。
  • 可能导致内存泄漏, 尤其是当立即执行函数内部的变量和参数被外部的作用域访问到时。

立即执行函数的使用场景:

  • 当我们需要创建局部作用域时, 例如, 当我们需要在函数内部访问一些私有变量时。
  • 当我们需要保护函数内部的变量和参数的隐私性时, 例如, 当我们需要在函数内部处理一些敏感数据时。
  • 当我们需要避免污染全局作用域时, 例如, 当我们需要在多个脚本文件中使用相同的变量和函数时。
  • 当我们需要将代码封装成独立的模块时, 例如, 当我们需要在多个项目中复用相同的代码时。