JavaScript 函数各种写法和场景

写法

JavaScript 函数有多种定义写法，核心分为函数声明、函数表达式、箭头函数三大类，还有对象 / 类方法、立即执行函数等衍生写法，以下是具体示例和特点：

函数声明 最基础的写法，有函数名，存在函数提升（可在声明前调用）。
javascript 复制代码
```
function add(a, b) {
  return a + b;
}
// 可提前调用
console.log(add(1, 2)); // 3
```

函数表达式 匿名或具名函数赋值给变量，无函数提升，需先定义再调用。

javascript 复制代码

// 匿名函数表达式
const subtract = function(a, b) {
  return a - b;
};

// 具名函数表达式（函数名仅在内部可用）
const multiply = function mul(a, b) {
  console.log(mul.name); // mul
  return a * b;
};

箭头函数（ES6+） 简洁语法，无自身 this、arguments，适合回调函数，不能作为构造函数。

javascript 复制代码

// 无参数
const sayHi = () => console.log("Hi");

// 单个参数（可省略括号）
const double = num => num * 2;

// 多个参数+多语句（需加{}和return）
const divide = (a, b) => {
  if (b === 0) throw new Error("除数不能为0");
  return a / b;
};

对象 / 类中的方法写法 ES6 简化了对象方法的定义，类方法则通过 class 声明。

javascript 复制代码

// 对象方法简写
const user = {
  name: "Tom",
  greet() { // 省略function关键字
    console.log(`Hello, ${this.name}`);
  }
};

// 类方法
class Person {
  constructor(name) {
    this.name = name;
  }
  sayName() { // 实例方法
    console.log(this.name);
  }
}

**立即执行函数表达式（IIFE）**定义后立即执行，用于创建独立作用域，避免污染全局。
javascript 复制代码
```
(function(a, b) {
  console.log(a + b); // 5
})(2, 3);

// 箭头函数版IIFE
((a, b) => console.log(a - b))(5, 2); // 3
```

构造函数 用于创建对象实例，需配合 new 关键字使用。

javascript 复制代码

function Car(brand) {
  this.brand = brand;
  this.run = function() {
    console.log(`${this.brand} is running`);
  };
}
const bmw = new Car("BMW");
bmw.run(); // BMW is running

JS 各种函数写法适用场景对比表

表格里整理了核心 6 类函数写法的语法特点、核心优势、适用场景、避坑点，同时标注了 ES 版本和使用优先级，新手直接按场景选就行～

函数写法	ES 版本	核心语法特点	核心优势	最适用场景	避坑点 / 注意事项
函数声明	ES3	有函数名，`function 名(){}`，存在函数提升	可读性最高，可提前调用	全局通用函数、工具函数（如求和 / 格式化时间）	不能在`if/for`等块级作用域中声明（易产生作用域污染）
匿名函数表达式	ES3	无函数名，赋值给变量`const fn = function(){}`，无提升	简洁，适合临时回调	简单回调（如定时器`setTimeout`、数组简单遍历）	无函数名，调试栈信息不友好；无提升，必须先定义后调用
具名函数表达式	ES3	有内部函数名，`const fn = function fnName(){}`，外部不可访问内部名	调试栈信息清晰，支持内部递归	需递归的回调函数、复杂异步回调	内部函数名仅在函数内部有效，外部调用会报错
箭头函数	ES6+	无`function`，`()=>{}`，无自身 this/arguments，不能 new，简写规则多	极致简洁，this 继承上级作用域	1. 回调函数（数组遍历 / Promise）；2. 保持 this 指向（如对象方法内的嵌套函数）	1. 不能作为对象方法 / 类方法（this 会指向上级而非实例）；2. 不能作为构造函数；3. 无 arguments，需用`...rest`替代
对象 / 类方法简写	ES6+	对象：`{ fn(){} }`；类：`class { fn(){} }`，省略`function`，绑定实例 this	语义化强，this 指向清晰	1. 对象的方法定义；2. 类的实例方法 / 静态方法（静态加`static`）	类方法中普通函数 this 指向实例，若需绑定全局 / 固定 this，需配合`bind`或箭头函数
立即执行函数 IIFE	ES3	定义即执行，`(function(){})()`/`(()=>{})()`，独立作用域	隔离全局作用域，避免变量污染	ES6 模块前的全局代码隔离、一次性初始化逻辑（如页面加载时的全局配置）	现代 ES6 模块中几乎无需使用（模块本身有独立作用域）；箭头函数版需注意括号包裹

补充：2 个特殊函数写法（按需使用）

特殊写法	适用场景	核心注意点
构造函数	自定义对象实例（ES3）	需配合`new`使用，this 指向实例；建议用 ES6`class`替代，可读性更高
生成器函数`*`	异步分步执行（ES6+）	用`function*`定义，`yield`暂停，`next()`恢复，适合处理迭代 / 异步流

快速选型口诀（新手直接套）

全局工具函数 / 基础功能 → 函数声明（可读性第一）
简单回调 / 临时函数 → 箭头函数（简洁省代码）
需递归 / 调试友好的回调 → 具名函数表达式
对象 / 类的方法 → ES6 方法简写（语义化 + this 清晰）
保持 this 指向（如嵌套函数）→ 箭头函数
一次性执行 / 隔离作用域 → IIFE（现代项目少用，优先 ES6 模块）
避免用：对象方法用箭头函数、构造函数用箭头函数、块级作用域用函数声明

总结

日常开发优先级：函数声明 > 箭头函数 > ES6 方法简写 > 具名函数表达式 > 匿名函数表达式 > IIFE；
箭头函数是核心简化方案 ，但核心避坑点是不做对象 / 类方法，其余回调场景无脑用；
ES6 + 写法完全替代旧写法：类方法替代传统构造函数、模块替代 IIFE、箭头函数替代大部分匿名函数表达式。