JS自调用匿名函数的完整实现攻略

在 JavaScript 中，为了避免全局变量的污染以及保护代码的隐私，可以使用自调用匿名函数的方式来定义模块。下面是自调用匿名函数的具体实现方式。

基本形式

自调用匿名函数的基本形式如下：

(function(){
  // code here
})();

该函数定义了一个匿名函数并立即执行，参数列表为空，函数体内可以包含任意的 JavaScript 代码。可以用来封装一段脚本以避免全局变量和命名冲突。

传递参数

在匿名函数内可以指定参数，例如：

(function($){
  // code here
})(jQuery);

在这个例子中，我们把 jQuery 库作为参数传进自调用匿名函数中，这样就避免了全局变量的污染。

返回值

在自调用匿名函数中，可以使用 return 语句返回一个值，例如：

var result = (function(){
  // code here
  return myResult;
})();

这样就可以在调用函数时返回一个值，并将其存储在 result 变量中。

示例说明

以下是两个简单的例子，可以更好地理解自调用匿名函数的用法和效果。

示例一

在网页上引入 jQuery 库，然后在自调用匿名函数中使用 $ 符号作为 jQuery 的别名，以避免全局变量污染。

<!DOCTYPE html>
<html>
<head>
  <title>示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    (function($) {
      // code here
      $(document).ready(function() {
        $('p').click(function() {
          $(this).hide();
        });
      });
    })(jQuery);
  </script>
</head>
<body>
  <p>点击我，我就会消失</p>
</body>
</html>

示例二

通过自调用匿名函数来避免全局变量污染，封装一个计数器模块。

var counter = (function() {
  var count = 0;
  return {
    increment: function() {
      count++;
    },
    decrement: function() {
      count--;
    },
    value: function() {
      return count;
    }
  };
})();

console.log(counter.value()); // 0
counter.increment();
console.log(counter.value()); // 1
counter.decrement();
console.log(counter.value()); // 0

在这个例子中，我们定义了一个 counter 对象，该对象包含三个方法：increment、decrement 和 value。可以将该对象用于计数器的实现，同时避免了全局变量污染。