JS 学习 - 函数立即执行

学习前端中,不停的遇到新姿势,充满“惊喜”🤷。

普通函数

其他语言使用函数都是如下方式:先定义一个函数,然后调用。

1
2
3
4
5
function f(v) {
    console.log(v);
}

f('aaa');
  • 特点:函数定义和调用是分开的,函数可以在定义后多次调用。

立即执行的函数表达式(IIFE)

今天看到 js 一个奇怪的写法,用一对括号包起来一个函数。

有点类似 go 语言的匿名函数。

匿名的立即执行函数

1
2
3
((v) => {
    console.log(v);
})('ccc');
  • 解释:这是一个使用箭头函数的立即执行函数表达式(IIFE)。
  • 特点:
    • 使用箭头函数语法,更加简洁。
    • 函数定义后立即执行,参数 'ccc' 被传递给函数。
    • 函数没有名称,因此是匿名的。

命名的立即执行函数

和上面的匿名类似,只是给括号里的函数一个名字,但是名字没有意义,一般也不这样写。

1
2
3
(function f(v) {
    console.log(v);
})('bbb');
  • 解释:这是一个立即执行的函数表达式(Immediately Invoked Function Expression, IIFE)。函数定义后立即执行。
  • 特点:
    • 函数被括号包裹,形成一个表达式。
    • 函数定义后立即执行,参数 'bbb' 被传递给函数。
    • 函数名 f 在这种情况下通常没有实际意义,因为函数不会被多次调用,名称主要用于调试或可读性。

总结

  • 写法一:适合需要多次调用的函数。
  • 写法二和写法三:适合需要立即执行的函数,通常用于创建一个独立的作用域,避免变量污染全局命名空间。