立即执行函数

411 阅读2分钟

IIFE( 立即调用函数表达式)是一个在定义时就会立即执行的 JavaScript

(function () {
    statements
})();

这是一个被称为 自执行匿名函数 的设计模式,包含两部分。

第一部分是包围在 圆括号运算符 () 里的一个匿名函数,这个匿名函数拥有独立的词法作用域。这不仅避免了外界访问此 IIFE 中的变量,而且又不会污染全局作用域

第二部分再一次使用 () 创建了一个立即执行函数表达式,JavaScript 引擎到此将直接执行函数。

示例:

var result = (function () {
 var name = "Barry";
 return name;
})();
// IIFE 执行后返回的结果:
result; // "Barry"
console.log(name);  //name is undefined

当函数变成立即执行的函数表达式时,表达式中的变量不能从外部访问。

立即执行函数的作用:

  • 不必为函数命名,避免了污染全局变量
  • 立即执行函数内部形成了一个单独的作用域,可以封装一些外部无法读取的私有变量
  • 封装变量

总而言之:立即执行函数会形成一个单独的作用域,我们可以封装一些临时变量或者局部变量,避免污染全局变量

例如:某些代码只需要执行一次,比如只需要显示一个时间,但是这些代码也需要一些临时的变量,但是初始化过程结束之后,就再也不会被用到,如果将这些变量作为全局变量,不是一个好的主意,我们可以用立即执行函数——去将我们所有的代码包裹在它的局部作用域中,不会让任何变量泄露成全局变量,看如下代码:

    当前时间:<span id="today"></span>
  <script>
    (function () {
      var currentTime = document.getElementById("today");
      var days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      var today = new Date();
      var year = today.getFullYear();
      var month = today.getMonth() + 1;
      var date = today.getDate();
      var day = today.getDay();
      var msg = year + "年" + month + "月" + date + "日" + days[day];
      currentTime.innerHTML = msg;
    })()
  </script>

当然,也可以使用ES6的块级作用域解决这个问题