从入门到精通 JavaScript 1000例实战开发专栏--第三章：函数与作用域

本章将深入讲解JavaScript中函数的核心概念，包括函数的定义与调用方式、参数与返回值的处理、作用域链的工作机制以及闭包的应用场景。此外，我们还将介绍立即执行函数（IIFE）的概念及其实际用途。通过本章的学习，您将掌握函数在JavaScript中的重要性，并能够灵活运用这些知识解决实际开发中的问题。

1. 函数的定义与调用

1.1 函数的定义

在JavaScript中，函数是一种可重复使用的代码块，用于完成特定任务。以下是三种常见的函数定义方式：

函数声明：
- 使用function关键字定义。
- 示例：
```
 
```
  javascript
  深色版本
```
function greet(name) {
    return `Hello, ${name}!`;
}
```
函数表达式：
- 将函数赋值给变量。
- 示例：
```
 
```
  javascript
  深色版本
```
const add = function(a, b) {
    return a + b;
};
```
箭头函数（ES6新增）：
- 更简洁的语法，适合简单逻辑。
- 示例：
```
 
```
  javascript
  深色版本
```
const multiply = (x, y) => x * y;
```

1.2 函数的调用

函数可以通过其名称后加括号的方式调用，并传递参数。

示例：

javascript

深色版本

console.log(greet("Alice")); // 输出 "Hello, Alice!"
console.log(add(3, 5)); // 输出 8
console.log(multiply(4, 6)); // 输出 24

2. 参数与返回值

2.1 参数

函数可以接受任意数量的参数，即使定义时没有明确指定。

默认参数（ES6新增）：

如果未传递参数，可以为参数设置默认值。

示例：

javascript

深色版本

function divide(a, b = 1) {
    return a / b;
}
console.log(divide(10)); // 输出 10
console.log(divide(10, 2)); // 输出 5

剩余参数（Rest Parameters）：

用于收集多余参数到一个数组中。

示例：

javascript

深色版本

function sum(...numbers) {
    return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 输出 10

2.2 返回值

函数可以通过return语句返回一个值。如果没有显式返回值，默认返回undefined。

示例：

javascript

深色版本

function isEven(num) {
    return num % 2 === 0;
}
console.log(isEven(4)); // 输出 true
console.log(isEven(7)); // 输出 false

3. 作用域链与闭包

3.1 作用域链

作用域链是JavaScript中用来解析变量的过程。它决定了变量在何处可用。

全局作用域：
- 定义在任何函数外部的变量。
局部作用域：
- 定义在函数内部的变量。
块级作用域（ES6新增）：
- 使用let或const定义的变量，仅在代码块内有效。

3.2 闭包

闭包是指一个函数能够记住并访问它的词法作用域，即使这个函数在其词法作用域之外执行。

示例：

javascript

深色版本

function createCounter() {
    let count = 0; // 局部变量
    return function() {
        return count++; // 内部函数形成闭包
    };
}

const counter = createCounter();
console.log(counter()); // 输出 0
console.log(counter()); // 输出 1

闭包的应用场景

数据封装与隐藏。
创建工厂函数。
实现计数器等状态保持功能。

4. 立即执行函数（IIFE）

4.1 什么是IIFE？

立即执行函数（Immediately Invoked Function Expression，简称IIFE）是一种在定义后立即执行的匿名函数。它常用于创建独立的作用域，避免污染全局命名空间。

4.2 IIFE的语法

示例：

javascript

深色版本

(function() {
    let message = "Hello, World!";
    console.log(message); // 输出 "Hello, World!"
})();

console.log(message); // 报错：message is not defined

4.3 IIFE的实际应用