DEV Community

NikiMunger
NikiMunger

Posted on

立即执行函数(IIFE) &&函数表达式和函数声明

#javascript #beginners

＃＃ 目录
* 立即执行函数（IIFE）
* 函数表达式和函数声明

立即执行函数（IIFE）

在 JavaScript（JS） 中，立即执行函数（Immediately Invoked Function Expression，简称 IIFE）是指定义后立刻执行的函数。

  • 基本形式 
(function() {
  console.log("我被立即执行了！");
})();
Enter fullscreen mode Exit fullscreen mode

这段代码会立即输出：

我被立即执行了！
Enter fullscreen mode Exit fullscreen mode
  • 结构解释 这个语法其实是由两部分组成的： 函数表达式部分： 
(function() { ... })
Enter fullscreen mode Exit fullscreen mode

这是一个匿名函数，被一对括号包裹，
让它变成“表达式”，而不是“函数声明”。

立即执行部分：

()
Enter fullscreen mode Exit fullscreen mode

这对小括号会立刻调用上面的函数。

  • 为什么要加外层括号？ 如果你直接写： 
function() { ... }();
Enter fullscreen mode Exit fullscreen mode

JS 会报错 ，因为 function 开头默认被当作函数声明，而函数声明必须有名字。
但 (function(){})()被括号包住后，变成了函数表达式，可以直接执行。

  • 带参数的 IIFE 
(function(name) {
  console.log("你好，" + name);
})("小明");
Enter fullscreen mode Exit fullscreen mode

输出：

你好，小明
Enter fullscreen mode Exit fullscreen mode
  • 现代写法（箭头函数版本） 
(() => {
  console.log("立即执行箭头函数");
})();
Enter fullscreen mode Exit fullscreen mode

函数表达式和函数声明

  1. 函数声明
  • 语法： 
function sayHello() {
  console.log("你好！");
}
Enter fullscreen mode Exit fullscreen mode

这里的 function 是在语句层级使用的，声明了一个具名函数 sayHello。

  • 特点： 必须有函数名 
function () {} //  错误：函数声明必须有名字
Enter fullscreen mode Exit fullscreen mode

会被“提升”（Hoisting）
JS 在执行前会先“提升”函数声明，所以你可以在声明之前调用它：

sayHello(); // 可以正常运行
function sayHello() {
  console.log("你好！");
}
Enter fullscreen mode Exit fullscreen mode

定义在全局或局部作用域中
在全局作用域定义的函数会成为全局变量。
在函数内部定义的则只在内部可用。

  1. 函数表达式（Function Expression）
  • 语法： 
const sayHi = function() {
  console.log("嗨！");
};
Enter fullscreen mode Exit fullscreen mode

这里 function() {} 是一个匿名函数表达式，被赋值给变量 sayHi。

  • 特点： 函数可以匿名 
const f = function() { console.log("匿名函数"); };
Enter fullscreen mode Exit fullscreen mode

或者具名（命名表达式）：

const f = function myFunc() { console.log("命名表达式"); };
Enter fullscreen mode Exit fullscreen mode

不会被提升
在赋值前调用会出错：

sayHi(); // 报错：Cannot access 'sayHi' before initialization
const sayHi = function() {
  console.log("嗨！");
};
Enter fullscreen mode Exit fullscreen mode

可以作为值使用
因为是表达式，它可以：
赋给变量
作为参数传递
立即执行（形成 IIFE）
放进对象或数组中

  • 总结 | 特性 | 函数声明 | 函数表达式 | | ----------------- | ---------- | ------------ | | 是否被“提升”（Hoisting） | ✅ 是 | ❌ 否 | | 何时可用 | 在声明前也能用 | 必须等执行到赋值语句后 | | 适合场景 | 定义固定的可复用函数 | 定义一次性的、动态的函数 |

函数声明 → 用来定义稳定、可复用的功能块
函数表达式 → 用来定义临时函数、回调或闭包

Top comments (0)