JS匿名函数

上节介绍了具名函数，这节介绍匿名函数。

使用场景

匿名函数常用于以下场景：

l  作为回调函数: 可以将匿名函数作为参数传递给其他函数，用作回调函数。

l  隐藏变量: 通过将变量定义在匿名函数的作用域内，可以隐藏变量，避免全局污染。

l  模块化开发: 使用匿名函数可以创建模块，减少命名冲突。

匿名函数

JS匿名函数是指没有具体名称的函数，也称为无名函数或函数表达式。它与具名函数不同，没有一个标识符来引用它。

匿名函数可以通过函数表达式或立即调用函数表达式（IIFE）的方式进行定义和使用。

函数表达式：

var anonymousFunc = function() {
  // 函数体
};

在上述代码中，我们将匿名函数赋值给一个变量anonymousFunc，通过该变量可以调用该匿名函数。

立即调用函数表达式（IIFE）：

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

在上述代码中，匿名函数被包裹在括号内，并紧跟着一对额外的括号()，这样可以立即调用该函数。

匿名函数的运用

1. 回调函数

回调函数是一种异步编程的方式，我们可以把一个匿名函数作为回调函数传递给某个函数，以便在这个函数完成后自动执行。例如，下面的代码使用了 setTimeout 函数和一个匿名函数作为回调函数：

setTimeout(function() {
  console.log('3 seconds have passed.');
}, 3000);

上述代码中，setTimeout 函数接受两个参数，第一个参数是回调函数，第二个参数是设置等待时间。当等待时间过去后，就会执行该匿名函数。

2. 立即执行函数表达式（IIFE）

立即执行函数表达式（IIFE）是一种匿名函数的变体，它在定义之后立即执行。IIFE 可以有效地避免变量污染全局命名空间。例如：

(function() {
  var greeting = 'Hello';
  console.log(greeting + ' www.dotcpp.com!');
})();

上述代码中，定义了一个匿名函数，并将其括在一对括号中以便立即执行。该函数定义了一个局部变量 greeting，并通过 console.log 输出了 'Hello www.dotcpp.com!'。

3. 事件处理程序

在处理浏览器事件时，通常需要定义一个匿名函数作为事件处理程序。例如：

<button id="myButton">Click dotcpp.com!</button>
var myButton = document.querySelector('#myButton');
myButton.addEventListener('click', function() {
  console.log('Button dotcpp.com!');
});

上述代码中，首先获取一个按钮元素并将其保存在变量 myButton 中。然后使用 addEventListener 将一个匿名函数作为单击事件的处理程序注册到按钮上。

4. 模块化开发

在模块化开发中，通常会使用匿名函数来创建封闭的作用域，以保护模块内部的变量和函数不被其他代码污染。例如：

var myModule = (function() {
  var privateVariable = 10;
  function privateFunction() {
    console.log('This is a private function,dotcpp..com.');
  }
  return {
    publicMethod: function() {
      console.log('This is a public method,dotcpp.com.');
    }
  };
})();
myModule.publicMethod();

上述代码中，通过一个立即执行函数表达式创建了一个封闭的作用域，其中定义了一个私有变量和一个私有函数，并将一个包含公共方法的对象返回为模块接口。

以上是匿名函数在 JavaScript 中的几个运用场景，通过匿名函数可以使代码更加简洁优雅，且提高了代码的可复用性。