函数定义与调用

JavaScript提供了多种定义函数的方式，包括函数声明、函数表达式和箭头函数等。本文将介绍这些定义方式的语法和区别，以及函数调用的不同方式。

函数的基本概念

函数是JavaScript中的基本构建块之一，它是一段可重复使用的代码块，用于执行特定任务。函数可以接收输入（参数），并返回输出（返回值）。

函数的组成部分

一个典型的JavaScript函数包含以下部分：

• 函数名：用于标识和调用函数
• 参数列表：函数接收的输入值
• 函数体：包含函数执行的代码
• 返回值：函数执行后返回的结果

函数定义的方式

JavaScript提供了多种定义函数的方式，每种方式都有其特定的语法和用途。

函数声明

函数声明（Function Declaration）是最常见的函数定义方式。

语法：

function 函数名(参数1, 参数2, ...) {
    // 函数体
    return 返回值; // 可选
}

示例：

function greet(name) {
    return `你好，${name}！`;
}

console.log(greet('小明')); // 输出：你好，小明！

特点：

• 函数声明会被提升（hoisted），这意味着可以在声明之前调用函数
• 必须有函数名
• 在全局作用域或函数作用域中定义

// 函数提升示例
console.log(sum(5, 3)); // 输出：8，尽管函数定义在后面

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

函数表达式

函数表达式（Function Expression）将函数定义为表达式的一部分，通常是变量赋值。

语法：

const 变量名 = function [函数名](参数1, 参数2, ...) {
    // 函数体
    return 返回值; // 可选
};

示例：

const greet = function(name) {
    return `你好，${name}！`;
};

console.log(greet('小红')); // 输出：你好，小红！

命名函数表达式：

const factorial = function fact(n) {
    if (n <= 1) return 1;
    return n * fact(n - 1); // 使用函数名递归调用
};

console.log(factorial(5)); // 输出：120

特点：

• 函数表达式不会被提升，必须在定义后才能调用
• 函数名是可选的（匿名函数）
• 命名函数表达式的函数名只在函数内部可见，主要用于递归调用

// 函数表达式不会被提升
// console.log(multiply(2, 3)); // 错误：multiply is not a function

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

console.log(multiply(2, 3)); // 输出：6，必须在定义后调用

箭头函数

箭头函数（Arrow Function）是ES6引入的一种更简洁的函数定义方式。

语法：

const 变量名 = (参数1, 参数2, ...) => {
    // 函数体
    return 返回值; // 可选
};

简化语法：

• 单个参数时可以省略括号：param => { ... }
• 函数体只有一条返回语句时可以省略大括号和return：(a, b) => a + b

示例：

// 基本箭头函数
const greet = (name) => {
    return `你好，${name}！`;
};

// 单个参数，省略括号
const square = x => {
    return x * x;
};

// 简化返回语句
const add = (a, b) => a + b;

console.log(greet('小华')); // 输出：你好，小华！
console.log(square(5));     // 输出：25
console.log(add(3, 4));     // 输出：7

特点：

• 更简洁的语法
• 没有自己的this，继承自外部作用域
• 没有arguments对象
• 不能用作构造函数（不能使用new）
• 没有prototype属性
• 不能用作生成器函数（不能使用yield）

// this在箭头函数中的行为
const person = {
    name: '张三',
    regularFunction: function() {
        console.log(this.name); // 输出：张三
    },
    arrowFunction: () => {
        console.log(this.name); // 输出：undefined（或全局对象的name属性）
    }
};

person.regularFunction();
person.arrowFunction();

函数构造函数

使用Function构造函数动态创建函数（不推荐常规使用）。

语法：

const 变量名 = new Function(参数1, 参数2, ..., 函数体);

示例：

const sum = new Function('a', 'b', 'return a + b');
console.log(sum(2, 3)); // 输出：5

特点：

• 函数体是字符串形式
• 在全局作用域中创建，无法访问局部变量
• 性能较差，安全性问题（类似eval）
• 主要用于需要动态生成函数的高级场景

方法简写（对象方法）

ES6提供了在对象中定义方法的简写语法。

语法：

const 对象 = {
    方法名(参数1, 参数2, ...) {
        // 方法体
    }
};

示例：

// ES5方式
const person1 = {
    name: '李四',
    greet: function() {
        return `你好，我是${this.name}`;
    }
};

// ES6方法简写
const person2 = {
    name: '王五',
    greet() {
        return `你好，我是${this.name}`;
    }
};

console.log(person1.greet()); // 输出：你好，我是李四
console.log(person2.greet()); // 输出：你好，我是王五

函数调用的方式

JavaScript中有多种调用函数的方式，每种方式都会影响函数内部this的值。

直接调用

最基本的函数调用方式。

function sayHello() {
    console.log('你好！');
}

sayHello(); // 直接调用函数

在非严格模式下，this指向全局对象（浏览器中是window，Node.js中是global）；在严格模式下，this为undefined。

方法调用

作为对象的方法调用函数。

const person = {
    name: '赵六',
    greet() {
        console.log(`你好，我是${this.name}`);
    }
};

person.greet(); // 作为方法调用

此时this指向调用该方法的对象（上例中是person）。

构造函数调用

使用new关键字调用函数，将其作为构造函数。

function Person(name) {
    this.name = name;
    this.greet = function() {
        console.log(`你好，我是${this.name}`);
    };
}

const person = new Person('孙七');
person.greet(); // 输出：你好，我是孙七

使用new调用函数时：

1. 创建一个新对象
2. 将构造函数的this设置为这个新对象
3. 执行构造函数
4. 返回这个新对象（除非构造函数显式返回其他对象）

间接调用（call、apply、bind）

使用函数的call、apply或bind方法来调用函数，并指定this的值。

call方法

function greet() {
    console.log(`你好，我是${this.name}`);
}

const person1 = { name: '张三' };
const person2 = { name: '李四' };

greet.call(person1); // 输出：你好，我是张三
greet.call(person2); // 输出：你好，我是李四

call方法还可以传递参数：

function introduce(age, occupation) {
    console.log(`我是${this.name}，${age}岁，职业是${occupation}`);
}

introduce.call(person1, 30, '工程师'); // 输出：我是张三，30岁，职业是工程师

apply方法

apply与call类似，但接受数组形式的参数。

introduce.apply(person2, [25, '教师']); // 输出：我是李四，25岁，职业是教师

bind方法

bind方法创建一个新函数，其this值被永久绑定到指定对象。

const greetZhang = introduce.bind(person1);
greetZhang(30, '工程师'); // 输出：我是张三，30岁，职业是工程师

// 也可以预设部分参数
const introduceZhangAsEngineer = introduce.bind(person1, 30, '工程师');
introduceZhangAsEngineer(); // 输出：我是张三，30岁，职业是工程师

自调用函数（IIFE）

立即调用的函数表达式（Immediately Invoked Function Expression）。

(function() {
    console.log('我会立即执行！');
})(); // 输出：我会立即执行！

// 带参数的IIFE
(function(name) {
    console.log(`你好，${name}！`);
})('小明'); // 输出：你好，小明！

IIFE主要用于创建私有作用域，避免变量污染全局命名空间。

函数参数

基本参数

function greet(firstName, lastName) {
    return `你好，${firstName} ${lastName}！`;
}

console.log(greet('张', '三')); // 输出：你好，张 三！

默认参数（ES6）

function greet(name = '访客', greeting = '你好') {
    return `${greeting}，${name}！`;
}

console.log(greet());           // 输出：你好，访客！
console.log(greet('张三'));     // 输出：你好，张三！
console.log(greet('李四', '早上好')); // 输出：早上好，李四！

剩余参数（Rest Parameters）

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

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

arguments对象

arguments是一个类数组对象，包含传递给函数的所有参数。

function printArgs() {
    for (let i = 0; i < arguments.length; i++) {
        console.log(`参数${i}: ${arguments[i]}`);
    }
}

printArgs('a', 'b', 'c');
// 输出：
// 参数0: a
// 参数1: b
// 参数2: c

注意：箭头函数没有arguments对象，应使用剩余参数代替。

函数返回值

基本返回值

function add(a, b) {
    return a + b; // 返回计算结果
}

const result = add(5, 3);
console.log(result); // 输出：8

多值返回

JavaScript函数只能返回一个值，但可以通过对象或数组返回多个值。

// 使用数组返回多个值
function getMinMax(numbers) {
    const min = Math.min(...numbers);
    const max = Math.max(...numbers);
    return [min, max];
}

const [min, max] = getMinMax([3, 1, 5, 2, 4]);
console.log(`最小值: ${min}, 最大值: ${max}`); // 输出：最小值: 1, 最大值: 5

// 使用对象返回多个值
function getUserInfo() {
    return {
        name: '张三',
        age: 30,
        email: 'zhangsan@example.com'
    };
}

const { name, email } = getUserInfo();
console.log(`姓名: ${name}, 邮箱: ${email}`); // 输出：姓名: 张三, 邮箱: zhangsan@example.com

提前返回

return语句会立即结束函数执行并返回指定的值。

function checkAge(age) {
    if (age < 18) {
        return '未成年';
    }
    
    if (age < 60) {
        return '成年';
    }
    
    return '老年';
}

console.log(checkAge(15)); // 输出：未成年
console.log(checkAge(30)); // 输出：成年
console.log(checkAge(65)); // 输出：老年

无返回值

如果函数没有return语句，或者return后没有表达式，则返回undefined。

function greet(name) {
    console.log(`你好，${name}！`);
    // 没有return语句
}

const result = greet('小明'); // 输出：你好，小明！
console.log(result); // 输出：undefined

函数作用域与闭包

函数作用域

JavaScript中的函数创建了一个新的作用域，函数内部声明的变量在函数外部不可访问。

function outer() {
    const message = '我在outer函数内部';
    console.log(message); // 可以访问
    
    function inner() {
        const innerMessage = '我在inner函数内部';
        console.log(message); // 可以访问外部函数的变量
        console.log(innerMessage); // 可以访问
    }
    
    inner();
    // console.log(innerMessage); // 错误：innerMessage is not defined
}

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

闭包

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

function createCounter() {
    let count = 0; // 私有变量
    
    return function() {
        count++; // 访问外部函数的变量
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 输出：1
console.log(counter()); // 输出：2
console.log(counter()); // 输出：3

闭包的实际应用：

// 创建私有变量
function createPerson(name) {
    // name是私有变量，外部无法直接访问
    return {
        getName() {
            return name;
        },
        setName(newName) {
            name = newName;
        }
    };
}

const person = createPerson('张三');
console.log(person.getName()); // 输出：张三
person.setName('李四');
console.log(person.getName()); // 输出：李四

递归函数

递归是指函数调用自身的过程。

// 计算阶乘
function factorial(n) {
    if (n <= 1) {
        return 1; // 基本情况
    }
    return n * factorial(n - 1); // 递归调用
}

console.log(factorial(5)); // 输出：120 (5 * 4 * 3 * 2 * 1)

递归的关键是有一个基本情况（终止条件）和递归步骤。

// 斐波那契数列
function fibonacci(n) {
    if (n <= 1) {
        return n; // 基本情况
    }
    return fibonacci(n - 1) + fibonacci(n - 2); // 递归调用
}

console.log(fibonacci(7)); // 输出：13

注意：深度递归可能导致栈溢出，可以使用尾递归优化或迭代方法解决。

// 尾递归优化的阶乘函数
function factorialTailRecursive(n, accumulator = 1) {
    if (n <= 1) {
        return accumulator;
    }
    return factorialTailRecursive(n - 1, n * accumulator);
}

console.log(factorialTailRecursive(5)); // 输出：120

高阶函数

高阶函数是指接受函数作为参数和/或返回函数的函数。

函数作为参数

function operate(a, b, operation) {
    return operation(a, b);
}

// 定义不同的操作函数
const add = (x, y) => x + y;
const subtract = (x, y) => x - y;
const multiply = (x, y) => x * y;

console.log(operate(5, 3, add));      // 输出：8
console.log(operate(5, 3, subtract)); // 输出：2
console.log(operate(5, 3, multiply)); // 输出：15

返回函数

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

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

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

实际应用

高阶函数在函数式编程中非常常见，如数组的map、filter和reduce方法。

const numbers = [1, 2, 3, 4, 5];

// map是一个高阶函数
const doubled = numbers.map(num => num * 2);
console.log(doubled); // 输出：[2, 4, 6, 8, 10]

// filter是一个高阶函数
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // 输出：[2, 4]

// reduce是一个高阶函数
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 输出：15

函数柯里化

柯里化是将一个接受多个参数的函数转换为一系列接受单个参数的函数的技术。

// 普通函数
function add(a, b, c) {
    return a + b + c;
}

// 柯里化版本
function curriedAdd(a) {
    return function(b) {
        return function(c) {
            return a + b + c;
        };
    };
}

console.log(add(1, 2, 3)); // 输出：6
console.log(curriedAdd(1)(2)(3)); // 输出：6

// 使用箭头函数简化
const curriedAddArrow = a => b => c => a + b + c;
console.log(curriedAddArrow(1)(2)(3)); // 输出：6

柯里化的实际应用：

// 创建一个通用的柯里化函数
function curry(fn) {
    return function curried(...args) {
        if (args.length >= fn.length) {
            return fn.apply(this, args);
        } else {
            return function(...args2) {
                return curried.apply(this, args.concat(args2));
            };
        }
    };
}

// 使用通用柯里化函数
function sum(a, b, c, d) {
    return a + b + c + d;
}

const curriedSum = curry(sum);

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

函数式编程概念

JavaScript支持函数式编程范式，其中函数是一等公民。

纯函数

纯函数是指给定相同的输入，总是返回相同的输出，且没有副作用的函数。

// 纯函数
function add(a, b) {
    return a + b;
}

// 非纯函数（有副作用）
let total = 0;
function addToTotal(value) {
    total += value; // 修改外部状态
    return total;
}

不可变性

不可变性是指一旦创建，数据就不应该被修改。

// 不可变方式处理数据
const originalArray = [1, 2, 3];

// 创建新数组而不是修改原数组
const newArray = [...originalArray, 4];
console.log(originalArray); // 输出：[1, 2, 3]
console.log(newArray);      // 输出：[1, 2, 3, 4]

// 创建新对象而不是修改原对象
const originalPerson = { name: '张三', age: 30 };
const updatedPerson = { ...originalPerson, age: 31 };
console.log(originalPerson); // 输出：{ name: '张三', age: 30 }
console.log(updatedPerson);  // 输出：{ name: '张三', age: 31 }

函数组合

函数组合是将多个简单函数组合成一个复杂函数的过程。

// 简单函数
const double = x => x * 2;
const increment = x => x + 1;
const square = x => x * x;

// 手动组合
const manualCompose = x => square(increment(double(x)));
console.log(manualCompose(3)); // 输出：49 ((3*2+1)^2)

// 创建通用的组合函数
function compose(...fns) {
    return function(x) {
        return fns.reduceRight((value, fn) => fn(value), x);
    };
}

const composed = compose(square, increment, double);
console.log(composed(3)); // 输出：49

常见错误和最佳实践

常见错误

1. 忘记返回值

// 错误
function add(a, b) {
    a + b; // 没有return语句
}

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

2. 作用域混淆

// 错误
function outer() {
    var x = 10;
    if (true) {
        var x = 20; // 同一个变量，覆盖了外部的x
        console.log(x); // 20
    }
    console.log(x); // 20，而不是预期的10
}

// 正确（使用let或const）
function outer() {
    let x = 10;
    if (true) {
        let x = 20; // 新的变量，不影响外部的x
        console.log(x); // 20
    }
    console.log(x); // 10
}

3. this绑定问题

// 错误
const person = {
    name: '张三',
    greet: function() {
        setTimeout(function() {
            console.log(`你好，我是${this.name}`); // this不指向person
        }, 1000);
    }
};

// 正确（使用箭头函数或bind）
const person = {
    name: '张三',
    greet: function() {
        setTimeout(() => {
            console.log(`你好，我是${this.name}`); // 箭头函数继承this
        }, 1000);
    }
};

最佳实践

1. 使用函数声明而不是函数表达式进行提升

// 推荐
function doSomething() {
    // ...
}

// 不推荐（如果需要在定义前使用）
const doSomething = function() {
    // ...
};

2. 使用默认参数而不是条件检查

// 不推荐
function greet(name) {
    name = name || '访客';
    return `你好，${name}！`;
}

// 推荐
function greet(name = '访客') {
    return `你好，${name}！`;
}

3. 避免过多的参数

// 不推荐
function createUser(name, age, email, address, phone, occupation) {
    // ...
}

// 推荐
function createUser(userInfo) {
    const { name, age, email, address, phone, occupation } = userInfo;
    // ...
}

4. 使用命名函数而不是匿名函数（便于调试）

// 不推荐
const calculate = function(a, b) {
    return a + b;
};

// 推荐
const calculate = function add(a, b) {
    return a + b;
};
// 或者
function add(a, b) {
    return a + b;
}
const calculate = add;

5. 避免在循环中创建函数

// 不推荐
for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i); // 输出5个5
    }, 100);
}

// 推荐
for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i); // 输出0,1,2,3,4
    }, 100);
}
// 或者
for (var i = 0; i < 5; i++) {
    (function(j) {
        setTimeout(function() {
            console.log(j); // 输出0,1,2,3,4
        }, 100);
    })(i);
}

总结

JavaScript函数是非常灵活和强大的，它们可以以多种方式定义和调用。理解不同的函数定义方式、调用方式以及相关概念（如作用域、闭包、递归和高阶函数）对于编写高质量的JavaScript代码至关重要。

选择合适的函数定义方式取决于具体的使用场景：

• 使用函数声明进行提升和命名函数
• 使用函数表达式进行变量赋值和匿名函数
• 使用箭头函数进行简洁的语法和词法this绑定
• 使用方法简写进行对象方法定义

函数是JavaScript中的一等公民，可以作为参数传递、从其他函数返回、赋值给变量，以及存储在数据结构中。这种灵活性使JavaScript成为一种强大的函数式编程语言。

练习

1. 编写一个函数，接受任意数量的数字参数并返回它们的平均值
2. 创建一个计数器函数，每次调用时返回递增的数字
3. 实现一个函数，可以限制另一个函数在指定时间内只能调用一次（防抖函数）
4. 编写一个递归函数来计算斐波那契数列的第n个数
5. 创建一个高阶函数，可以为任何函数添加日志记录功能