第7章_JS函数与DOM

授课语音

掌握函数基础与函数高级应用

在JavaScript中，函数是组织和封装代码的基本单位，掌握函数的基础和高级应用是提升编码能力的关键。本课将详细介绍函数的基础知识，并通过实例讲解函数的高级应用方法。

1. 函数基础

1.1 定义函数

函数是通过 function 关键字定义的，可以接受参数并返回值。

// 基本的函数定义
function greet(name) {
    return 'Hello, ' + name;
}

console.log(greet('Alice')); // 输出 "Hello, Alice"

中文注释：

使用 function 关键字定义一个简单的函数 greet，它接受一个参数 name，并返回一个问候语。

1.2 函数表达式

函数也可以作为表达式赋值给变量，这种方式定义的函数称为函数表达式。

let sum = function(a, b) {
    return a + b;
};

console.log(sum(3, 5)); // 输出 8

中文注释：

使用函数表达式创建一个匿名函数，并将其赋值给变量 sum。

1.3 箭头函数

箭头函数是ES6引入的简化函数语法，省略了 function 关键字，且不绑定 this。

let multiply = (a, b) => a * b;

console.log(multiply(4, 5)); // 输出 20

中文注释：

箭头函数简化了函数的定义，适用于简单的返回值。

2. 函数高级应用

2.1 高阶函数

高阶函数是指接受函数作为参数或返回值的函数。在JavaScript中，函数是第一类对象，因此它们可以作为参数传递。

2.1.1 将函数作为参数传递

function greet(name, callback) {
    console.log('Hello, ' + name);
    callback();  // 执行回调函数
}

function goodbye() {
    console.log('Goodbye!');
}

greet('Alice', goodbye);
// 输出:
// Hello, Alice
// Goodbye!

中文注释：

greet 函数接受一个参数 callback，它在执行完自己的逻辑后调用传入的回调函数。

2.1.2 函数作为返回值

function multiplier(factor) {
    return function(number) {
        return number * factor;
    };
}

let multiplyBy2 = multiplier(2);
console.log(multiplyBy2(5)); // 输出 10

中文注释：

multiplier 函数返回一个新的函数，该函数接受一个参数并将其与 factor 相乘。

2.2 闭包

闭包是指函数能够“记住”并访问其定义时的作用域，即使函数在外部被调用。闭包通常用于保持私有数据。

function counter() {
    let count = 0;  // 外部函数的局部变量
    return function() {
        count++;  // 访问外部函数的变量
        console.log(count);
    };
}

let countUp = counter();
countUp(); // 输出 1
countUp(); // 输出 2
countUp(); // 输出 3

中文注释：

counter 函数返回一个函数，内部的 count 变量被外部访问，这就是闭包的表现。

2.3 柯里化（Currying）

柯里化是将一个接受多个参数的函数，转化为一个接受单一参数的函数，并且返回接受余下参数的函数。

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

let add5 = add(5);
console.log(add5(3)); // 输出 8

中文注释：

add 函数被柯里化，返回一个新的函数，该函数接受一个参数并返回两个参数的和。

2.4 函数的参数默认值

在ES6中，函数可以为参数设置默认值。当调用函数时，如果未传入该参数，则使用默认值。

function greet(name = 'Guest') {
    console.log('Hello, ' + name);
}

greet(); // 输出 "Hello, Guest"
greet('Alice'); // 输出 "Hello, Alice"

中文注释：

如果 greet 函数调用时没有传入 name 参数，则使用默认值 'Guest'。

2.5 Rest参数和扩展运算符

2.5.1 Rest参数

Rest参数用于将不定数量的参数收集到一个数组中。

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

console.log(sum(1, 2, 3, 4)); // 输出 10

中文注释：

...numbers 语法将传入的参数收集为一个数组，可以在函数内部进行处理。

2.5.2 扩展运算符

扩展运算符用于展开数组或对象。

let arr = [1, 2, 3];
let newArr = [...arr, 4, 5];

console.log(newArr); // 输出 [1, 2, 3, 4, 5]

中文注释：

使用 ...arr 将数组展开，添加新的元素后创建一个新数组。

2.6 函数的作用域

函数的作用域决定了变量的可访问范围。在JavaScript中，函数有自己的作用域，函数内部定义的变量不能在外部访问。

function outer() {
    let outerVar = 'I am outer';
    
    function inner() {
        let innerVar = 'I am inner';
        console.log(outerVar); // 可以访问外部函数的变量
    }
    
    inner();
    // console.log(innerVar); // 会报错，因为 innerVar 是内部函数的变量
}

outer();

中文注释：