JavaScript 函数详解

JavaScript 函数详解

个人主页：康师傅前端面馆

---

1. 函数概述

JavaScript 函数是一段可重复使用的代码块，用于执行特定任务。函数可以接收参数、执行操作并返回结果，是 JavaScript 编程的核心概念之一。

2. 函数声明

函数声明是定义函数的最基本方式，使用 function 关键字：

// 基本函数声明
function functionName(parameters) {
    // 函数体
    return value; // 可选的返回值
}

// 示例
function greet(name) {
    return "Hello, " + name;
}

函数声明的特点：

• 函数声明会被提升(hoisted)，可以在声明前调用
• 必须有函数名
• 可以在任何地方定义

// 函数提升示例 - 可以在声明前调用
console.log(add(2, 3)); // 输出: 5

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

3. 函数表达式

函数表达式是将函数赋值给一个变量：

// 函数表达式
const myFunction = function(parameters) {
    // 函数体
};

// 示例
const multiply = function(a, b) {
    return a * b;
};

console.log(multiply(3, 4)); // 输出: 12

函数表达式的特点：

• 遵循变量提升规则，不能在声明前调用
• 可以是匿名函数或命名函数

// 匿名函数表达式
const square = function(x) {
    return x * x;
};

// 命名函数表达式
const factorial = function fac(n) {
    return n < 2 ? 1 : n * fac(n - 1);
};

4. 作用域

作用域决定了变量和函数的可访问范围。

全局作用域

var globalVar = "I'm global";

function checkScope() {
    console.log(globalVar); // 可以访问全局变量
}

函数作用域

function outerFunction() {
    var outerVar = "I'm in outer function";
    
    function innerFunction() {
        console.log(outerVar); // 可以访问外层函数变量
    }
    
    innerFunction();
}

块级作用域 (ES6)

function blockScopeExample() {
    if (true) {
        let blockVar = "I'm block scoped";
        const blockConst = "I'm also block scoped";
    }
    // console.log(blockVar); // ReferenceError: blockVar is not defined
}

5. 匿名函数

匿名函数是没有名称的函数，常用于回调函数或立即执行函数表达式(IIFE)。

作为回调函数使用

// 数组方法中的匿名函数
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(num) {
    return num * 2;
});
console.log(doubled); // [2, 4, 6, 8, 10]

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

(function() {
    var privateVar = "I'm private";
    console.log("This function runs immediately");
})();

// 传参的IIFE
(function(name) {
    console.log("Hello, " + name);
})("World");

6. 箭头函数

箭头函数是ES6引入的函数语法糖，提供更简洁的语法和不同的 this 绑定行为。

基本语法

// 无参数
const sayHello = () => "Hello!";

// 单个参数
const double = x => x * 2;

// 多个参数
const add = (a, b) => a + b;

// 函数体有多行语句
const multiplyAndAdd = (a, b, c) => {
    const product = a * b;
    return product + c;
};

箭头函数与普通函数的区别

this 绑定

// 普通函数 - this 取决于调用方式
const obj1 = {
    name: "Object 1",
    greet: function() {
        console.log("Hello from " + this.name);
    }
};

// 箭头函数 - this 继承自外层作用域
const obj2 = {
    name: "Object 2",
    greet: () => {
        console.log("Hello from " + this.name); // this 不指向 obj2
    }
};

obj1.greet(); // "Hello from Object 1"
obj2.greet(); // "Hello from undefined"

arguments 对象

function regularFunction() {
    console.log(arguments); // 可以访问 arguments 对象
}

const arrowFunction = () => {
    // console.log(arguments); // ReferenceError: arguments is not defined
};

7. 函数变量

函数在JavaScript中是一等公民，可以像其他变量一样被赋值、传递和返回。

函数作为变量赋值

// 将函数赋值给变量
const greeting = function(name) {
    return "Hello, " + name;
};

const sayHi = greeting;
console.log(sayHi("Alice")); // "Hello, Alice"

函数作为参数传递

// 高阶函数 - 接收函数作为参数
function calculator(operation, a, b) {
    return operation(a, b);
}

const add = (a, b) => a + b;
const multiply = (a, b) => a * b;

console.log(calculator(add, 5, 3));      // 8
console.log(calculator(multiply, 5, 3)); // 15

函数作为返回值

// 工厂函数 - 返回函数
function createMultiplier(multiplier) {
    return function(number) {
        return number * multiplier;
    };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

8. 参数处理

默认参数

function greet(name = "Guest", greeting = "Hello") {
    return `${greeting}, ${name}!`;
}

console.log(greet());           // "Hello, Guest!"
console.log(greet("Alice"));    // "Hello, Alice!"
console.log(greet("Bob", "Hi")); // "Hi, Bob!"

剩余参数

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

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

解构参数

function printUser({name, age, email}) {
    console.log(`Name: ${name}, Age: ${age}, Email: ${email}`);
}

const user = {name: "Alice", age: 30, email: "alice@example.com"};
printUser(user); // "Name: Alice, Age: 30, Email: alice@example.com"

9. 闭包

闭包是指函数能够访问其外层作用域中的变量。

function outerFunction(outerVar) {
    return function innerFunction(innerVar) {
        console.log("Outer:", outerVar);
        console.log("Inner:", innerVar);
    };
}

const closure = outerFunction("outside");
closure("inside");
// 输出:
// Outer: outside
// Inner: inside

10. 总结

JavaScript函数是语言的核心特性，提供了多种定义和使用方式：

1. 函数声明 - 会被提升，可以在声明前调用
2. 函数表达式 - 更灵活，支持匿名和命名函数
3. 箭头函数 - 语法简洁，this绑定行为不同
4. 作用域 - 控制变量的可访问性
5. 函数变量 - 函数可作为值传递和返回