JavaScript 函数入门

学习目标

理解 JavaScript 中函数的基本概念、参数与返回值
掌握多种函数类型及其适用场景（如箭头函数、IIFE、递归等）
能够编写可复用、模块化且符合现代开发规范的函数
区分纯函数、高阶函数、回调函数等核心编程范式

正文内容

什么是函数

在 JavaScript 中，函数是一段可重复使用的代码块，用于执行特定任务。它能接收输入（参数），执行操作，并返回结果（输出）。函数是组织代码、提升可读性和复用性的核心工具。

function greet(name) {   // 'name' 是参数（形参）
  console.log("Hello " + name);
}

greet("Alice");  // "Alice" 是实参（调用时传入的实际值）

参数（Parameter）：函数定义中的占位符（如 name）
实参（Argument）：调用函数时传入的具体值（如 "Alice"）

默认参数

当调用函数未提供对应实参时，可使用默认值避免 undefined 错误：

function greet(name = "访客") {
  console.log("Hello, " + name);
}

greet();        // 输出：Hello, 访客
greet("张三");  // 输出：Hello, 张三

返回值

return 语句用于将结果从函数中传出，并立即终止函数执行：

function add(a, b) {
  return a + b;
}

let result = add(5, 10);
console.log(result); // 输出：15

注意：若函数无 return，则默认返回 undefined。

JavaScript 函数类型

JavaScript 提供了丰富多样的函数定义方式，适用于不同场景：

1. 命名函数

Named Function

拥有明确名称的函数，便于调试和复用：

function sayHello() {
  return "你好！";
}
console.log(sayHello()); // 你好！

2. 匿名函数

Anonymous Function

没有名称的函数，通常赋值给变量或作为回调使用：

const sayHi = function() {
  return "嗨！";
};
console.log(sayHi()); // 嗨！

3. 函数表达式

Function Expression

将函数赋值给变量，本质是匿名函数的一种使用形式：

const multiply = function(x, y) {
  return x * y;
};
console.log(multiply(3, 4)); // 12

4. 箭头函数

Arrow Function，ES6+

语法更简洁，且不绑定自己的 this，适合简短逻辑：

const square = n => n * n;
console.log(square(5)); // 25

// 多参数或多行需加括号和大括号
const sum = (a, b) => {
  return a + b;
};

5. 立即调用函数表达式

IIFE

定义后立即执行，常用于创建私有作用域，避免污染全局变量：

(function() {
  console.log("这段代码立即执行！");
})();

常见用途：模块初始化、临时变量隔离。

6. 回调函数

Callback Function

作为参数传递给其他函数，并在其内部被调用：

function processNumber(n, callback) {
  return callback(n);
}

const double = n => n * 2;
console.log(processNumber(6, double)); // 12

广泛用于事件处理、异步操作（如 setTimeout、fetch）。

7. 构造函数

Constructor Function

配合 new 关键字创建对象实例：

function Student(name, grade) {
  this.name = name;
  this.grade = grade;
}

const stu = new Student("李四", 85);
console.log(stu.name); // 李四

注：现代开发中更推荐使用 ES6 的 class 语法。

8. 异步函数

Async Function

使用 async/await 简化异步编程，返回 Promise：

async function fetchData() {
  return "数据已获取！";
}

fetchData().then(console.log); // 数据已获取！
// 或使用 await（需在 async 函数内）

9. 生成器函数

Generator Function

使用 function* 和 yield 实现可暂停 / 恢复的函数，适用于惰性求值或迭代控制：

function* countUp() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = countUp();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2

10. 递归函数

Recursive Function

函数调用自身，需设置终止条件，常用于树结构、阶乘等场景：

function factorial(n) {
  if (n === 0) return 1;
  return n * factorial(n - 1);
}

console.log(factorial(5)); // 120

注意栈溢出风险（深度过大时）。

11. 高阶函数

Higher-Order Function

满足以下任一条件：

接收函数作为参数
返回一个函数

function createMultiplier(factor) {
  return function(num) {
    return num * factor;
  };
}

const triple = createMultiplier(3);
console.log(triple(4)); // 12

内置方法如 map、filter、reduce 都是高阶函数。

12. 嵌套函数

Nested Functions

在函数内部定义的函数，可访问外层函数的变量（闭包）：

function outer(a) {
  function inner(b) {
    return a + b;
  }
  return inner;
}

const addHundred = outer(100);
console.log(addHundred(20)); // 120

13. 纯函数

Pure Function

相同输入始终得到相同输出
无副作用（不修改外部状态、不进行 I/O）

function pureAdd(x, y) {
  return x + y; // 安全、可预测
}

纯函数易于测试、并行化，是函数式编程的核心。

14. 剩余参数函数

Rest Parameters

使用 ... 收集不定数量的参数为数组：

function total(...numbers) {
  return numbers.reduce((sum, n) => sum + n, 0);
}

console.log(total(1, 2, 3, 4, 5)); // 15

与 arguments 对象相比，... 更灵活且是真实数组。

重点总结

概念	核心要点
参数 vs 实参	参数是定义时的占位符，实参是调用时传入的值
return	决定函数输出，执行后立即退出
箭头函数	简洁语法，无独立 `this`，适合简单逻辑
IIFE	创建隔离作用域，避免全局污染
回调 & 高阶函数	JavaScript 异步和函数式编程的基础
纯函数	无副作用、可预测，利于维护和测试
剩余参数	`...args` 将多余参数转为数组

思考题

为什么箭头函数不适合用作对象的方法？请结合 this 绑定机制说明。
在什么场景下你会选择使用 IIFE？能否举一个实际开发中的例子？
纯函数和非纯函数在调试和测试时有何显著差异？为什么函数式编程推崇纯函数？