JavaScript中立即执行函数实例详解

2023年5月27日上午11:45 • JavaScript

JavaScript中的立即执行函数是指在定义后立即执行的函数，该函数执行后，返回值即被抛弃，仅保留函数内部的执行结果，不会对全局环境造成污染。本文将详细讲解JavaScript中立即执行函数的各个方面，包括基本语法、应用示例以及优缺点等。

基本语法

JavaScript中的立即执行函数需要使用一对匿名函数进行定义，但为了避免匿名函数对全局环境造成影响，并使其立即执行，我们需要在函数定义后紧跟一对小括号，将参数传入该函数。例如：

(function(){
  // 这里是立即执行函数的代码块
})();

上述代码中，我们使用一对匿名函数定义了一个立即执行函数，并在定义后立即调用它。为了使匿名函数能够立即执行，我们在定义后加入了一个立即调用的小括号，这对小括号会立即执行其中的内容。

该语法中最内层的一对小括号可有可无，只是为了保证代码规范化和易读化而添加的。

我们还可以在函数定义时传入参数，例如：

(function(name) {
  console.log(`Hello, ${name}!`);
})('world');

上述代码中，我们定义了一个带有一个参数的立即执行函数，并在定义时将参数传入函数中，最终在控制台输出"Hello, world!"。

应用示例

封闭作用域

立即执行函数在JavaScript中广泛应用于封闭作用域，通常在立即执行函数中定义的变量和函数仅在函数内部可访问，不会对全局环境造成污染。例如：

(function() {
  var a = 1;
  console.log(a); // 输出1

  function foo() {
    console.log(a); // 输出1
  }

  foo();
})();

console.log(typeof a); // 输出undefined
console.log(typeof foo); // 输出undefined

在上述代码中，我们定义了一个带有封闭作用域的立即执行函数，其中定义了一个局部变量a和一个函数foo。在立即执行函数的内部，我们可以自由地访问变量a和函数foo，但是在函数外部，它们都无法访问，因为其中都是在立即执行函数的封闭作用域内定义的。

消除重复定义

JavaScript中的立即执行函数也常常用于消除重复定义的问题。在需要多次地定义某个变量或函数时，我们可以将其定义在一个立即执行函数内，这样变量或函数的定义只在函数第一次调用时执行，避免因重复定义而造成的意外问题。例如：

var a = 1;
console.log(`a = ${a}`);

(function() {
  var a = 2;
  console.log(`a = ${a}`);
})();

(function() {
  var a = 3;
  console.log(`a = ${a}`);
})();

console.log(`a = ${a}`);

在上述代码中，我们定义了一个全局变量a，并使用了两个立即执行函数，分别定义了变量a的值为2和3。在全局环境中输出a的值，我们可以看到输出结果是1，这是因为立即执行函数中重新定义的变量a仅在函数内部生效，不会影响到全局作用域中的变量a。