JavaScript IIFE

92 阅读2分钟

前言

IIFE(Immediately Invoked Function Expression)是立即调用的函数表达式的缩写。它是一种常见的 JavaScript 模式,用于创建一个立即执行的匿名函数

IIFE 基本语法如下:

(function () {
  // 函数体
})();

在上述语法中,我们使用 (function () { ... }) 创建一个匿名函数,并紧接着使用 () 运算符立即调用这个函数。

IIFE 的主要特点是它在定义后立即执行,这样可以创建一个独立的作用域,避免变量污染和命名冲突。由于 IIFE 创建的是一个函数表达式,而不是函数声明,因此它不会被提升到作用域顶部,而是在定义的位置立即执行。

IIFE 在实际应用中有多种用途,例如:

1. 变量封装:通过 IIFE 中定义变量,可以将其限制在函数作用域内,防止变量泄露到全局作用域。

(function () {
  var privateVariable = '私有变量';
  // ...
})();
console.log(privateVariable); // 报错:privateVariable is not defined

2. 避免命名冲突:通过将代码包装在 IIFE 中,可以避免与其他代码库或模块的命名冲突

(function ($) {
  // 使用 $ 作为参数,确保在函数内部 $ 表示 jQuery
  // ...
})(jQuery);

3. 模块化开发:结合 IIFE 和闭包,可以实现模块化开发,将相关的代码和变量封装在一个独立的作用域中

var myModule = (function () {
  var privateVariable = '私有变量';

  function privateFunction() {
    console.log('私有函数');
  }

  return {
    publicMethod: function () {
      console.log('公共方法');
    }
  };
})();

myModule.publicMethod(); // 输出:公共方法
myModule.privateVariable; // undefined
myModule.privateFunction(); // 报错:myModule.privateFunction is not a function

在上述示例中,我们使用 IIFE 创建了一个模块 myModule,它包含一个私有变量 privateVariable 和一个私有函数 privateFunction。通过返回一个包含公共方法的对象字面量,我们可以在外部访问到模块的公共方法,但无法直接访问私有变量和私有函数。

通过使用 IIFE,我们可以轻松创建独立的作用域和模块,实现更好的代码封装和组织

结语:

本章我们了解了IIFE函数,在开发内库的时候,使用较多。学到这里,我们已经打败了百分之4的面试官了,学不完,根本学不完。但是你看了我的JavaScript基础教程,你就必须学完,因为重要的是不是结果,而是你决定学习我写的JavaScript基础教程你就是明智的选择。去做你值得对的事情,这,才是最重要!好了靓仔(女),我们出发本节的最后一章,预编译🚀