JS自执行函数原理及用法

1. 什么是自执行函数

自执行函数是指在定义后立即执行的一种函数。

在 JavaScript 中，所有的函数都是对象，因此自执行函数本质上也是一个函数对象，只是这个函数对象定义后立即执行了。

自执行函数是利用函数作用域和闭包的特性，可以有效避免全局污染和变量名冲突。

2. 自执行函数的语法

自执行函数的语法非常简单，只需要在函数定义时在函数定义后添加一个括号即可。

(function() {
  // function body
})();

在这个语法结构中，圆括号内部不能包含函数名称，否则就变成了通过函数名称来调用函数，而不是定义并自动执行函数。

3. 自执行函数的用法

3.1. 避免全局变量污染

自执行函数可以用来封装一些代码，防止它们污染全局作用域。例如：

(function() {
  var message = "Hello, world!";
  alert(message);
})();

在这个例子中，代码被包裹在自执行函数中，因此其中定义的变量 message 不会影响到全局作用域，也不会和其他脚本产生冲突。

3.2. 把变量作用域限制在函数内部

在 JavaScript 中，变量的作用域是函数级别的，而不是块级别的。这意味着，如果一个变量在函数内部定义，它可以在该函数的任何位置访问到。

自执行函数可以用来把变量的作用域限制在函数内部。例如：

(function() {
  var message = "Hello, world!";
  function showMessage() {
     alert(message);
  }
  showMessage();
})();

在这个例子中，变量 message 被定义在自执行函数内部，它只能在自执行函数内部访问到。函数 showMessage 也是如此，它只能在自执行函数内部访问到。

4. 注意事项

4.1. 自执行函数必须使用括号包裹

在语法上，自执行函数必须使用括号将函数定义括起来，再加上一对括号，才能正确地执行自执行函数。

(function() {
  // function body
})();

同时也要注意，括号内部不能包含函数的名称，否则就是定义函数而非自执行函数。

4.2. 自执行函数的返回值可以被使用

自执行函数是一个普通的函数，因此你可以通过在括号内部插入参数，将返回值暴露出来并被外部使用。

例如：

var result = (function() {
  return "Hello, world";
})();
alert(result); // "Hello, world"

在这个例子中，自执行函数返回一个字符串 "Hello, world"，该字符串被存储在变量 result 中，并可以在后面的代码中使用。

5. 示例

5.1. 在自执行函数中全局定义常量

(function() {
  const PI = 3.14;
  console.log(`PI is ${PI}`);
})();
console.log(PI); // 抛出一个未定义的异常

5.2. 在自执行函数中添加一个事件处理函数

(function() {
  var button = document.getElementById('my-button');
  button.addEventListener('click', function() {
    // 处理按钮点击事件的代码
    console.log("button clicked");
  });
})();