JavaScript 立即执行函数 IIFE 与匿名函数用法

为什么需要它

在定义函数之后，想要立即调用此函数

作用

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

如何使用

不能再函数语句的定义之后加上圆括号立即调用

function () { /* code */ }

();
// SyntaxError: Unexpected token (

JavaScript 规定，如果 function 关键字出现在行首，一律解释成语句。因此，引擎看到行首是 function 关键字之后，认为这一段都是函数的定义，不应该以圆括号结尾，所以就报错了。

// 语句
function f() {}

// 表达式
var f = function f() {};

当作表达式时，函数可以定义后直接加圆括号调用。

var f = (function f() {
  return 1;
})();
f; // 1

函数语句立即调用的解决方法

不要让 function 出现在行首，将语句包裹在一个圆括号中,这就叫做 立即调用的函数表达式

最后的分号都是必须的,避免连着两个 IIFE

(function () {
  /* code */
})();
// 或者
(function () {
  /* code */
})();

或者下面的写法也可以作为 立即调用的函数表达式

!(function () {
  /* code */
})();
~(function () {
  /* code */
})();
-(function () {
  /* code */
})();
+(function () {
  /* code */
})();

什么是匿名函数

没有实际名字的函数，如上述的 IIEF，他们都没有实际的函数名称。

匿名函数字自执行示例

方式一

// 无参数的匿名函数
(function () {
  console.log('fx');
})();

// 带参数的匿名函数
(function (a, b, c) {
  console.log('参数一:', a); // 参数一: 这是普通函数传参的地方
  console.log('参数二:', b); // 参数二: 我是参数二
  console.log('参数三:', c); // 参数三: fx
})('这是普通函数传参的地方', '我是参数二', 'fx');

方式二

// 推荐使用
(function () {
  console.log('fx');
})();

方式三

!(function (fx) {
  console.log(fx);
})('fx');

方式四

let fx = (function (fx) {
  console.log(fx);
})('fx');

匿名函数应用场景

// 1.事件
$('#fx').onclick = function () {
  console.log('给按钮添加点击事件');
};

// 2.对象
var obj = {
  name: 'fx',
  fx: function () {
    return this.name + ' is' + ' good girl';
  },
};
console.log(obj.fx()); // fx is good girl

// 3.函数表达式
var fx = function () {
  return 'fx is good girl';
};
console.log(fx()); // fx is good girl

// 4.回调函数
setInterval(function () {
  console.log('fx is good girl');
}, 1000);

// 5.作为函数的返回值
function fx() {
  // 返回匿名函数
  return function () {
    return 'fx';
  };
}

console.log(fx()()); // fx

匿名函数的缺点

匿名函数在栈追踪中不会显示出有意义的函数名，使得调试很困难。
如果没有函数名，当函数需要引用自身时只能使用已经过期的 arguments.callee 引用，比如在递归中。另一个函数需要引用自身的例子，是在事件触发后事件监听器需要解绑自身。
匿名函数省略了对于代码可读性 / 可理解性很重要的函数名。一个描述性的名称可以让代码不言自明。