白骑士的JavaScript教学语法基础篇之函数 2.4.2 函数表达式与箭头函数

        在JavaScript中，函数不仅可以通过传统的声明方式定义，还可以通过函数表达式或箭头函数进行定义。这些方式各有特点，适用于不同的编程场景。了解并灵活运用它们，将大大提高代码的灵活性和简洁性。

函数表达式

        函数表达式是将函数定义为一个表达式，并将其赋值给一个变量。与函数声明不同，函数表达式并没有函数名，因此常被称为匿名函数。

基本语法

const functionName = function(parameters) {
    // 函数体
    return value; // 可选
};

• functionName：用于存储函数的变量名。
• parameters：函数接受的参数列表，可以有多个参数，用逗号分隔。

示例

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

console.log(add(3, 4)); // 输出 7

        在这个示例中，匿名函数被赋值给‘add‘变量。通过调用‘add‘，可以执行该函数并得到返回值‘7‘。

使用函数表达式的好处

• 灵活性：函数表达式可以在运行时动态创建和赋值。
• 作用域控制：函数表达式通常定义在局部作用域内，更容易控制变量的可访问性。
• 更好地支持回调函数：函数表达式非常适合用于回调函数或立即执行的函数表达式（IIFE）。

匿名函数与具名函数

        尽管函数表达式常用于匿名函数，但你也可以为函数表达式命名，从而在调试时提供更清晰的堆栈信息。

示例

const factorial = function fact(n) {
    if (n <= 1) return 1;
    return n * fact(n - 1);
};

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

        在这个示例中，函数表达式‘fact‘可以递归调用自身，但在外部只能通过‘factorial‘变量来访问它。

箭头函数

        箭头函数是ES6引入的一种更简洁的函数表达式语法。与传统函数表达式相比，箭头函数在书写上更为简洁，并且在‘this‘绑定上有显著的区别。

基本语法

const functionName = (parameters) => {
    // 函数体
    return value; // 可选
};

• parameters：函数的参数列表。如果只有一个参数，可以省略括号。
• return：如果函数体只有一行且直接返回结果，可以省略‘{}‘和‘return‘关键字。

简化写法

• 没有参数时，需要用‘()‘表示参数部分。
• 单一参数时，可以省略‘()‘。
• 只有一行返回语句时，可以省略‘{}‘和‘return‘。

示例

const multiply = (a, b) => a * b;
console.log(multiply(3, 4)); // 输出 12

        在这个示例中，‘multiply‘是一个箭头函数，它接收两个参数并返回它们的乘积。由于函数体只有一行返回语句，写法被大大简化。

箭头函数的特点

• 简洁的语法：箭头函数相对于传统函数表达式更加简洁，尤其适用于简单的回调函数和内联函数。
• 没有‘this‘绑定：箭头函数不绑定自己的‘this‘，而是继承自外部作用域的‘this‘。这使得它非常适合在需要保留上下文的场景中使用，如在对象方法或回调函数中。
• 没有‘arguments‘对象：箭头函数没有‘arguments‘对象，如果需要使用参数列表，可以使用ES6的剩余参数语法‘...args‘。

示例

const obj = {
    value: 10,

    getValue: function() {
        return () => this.value;
    }
};

const fn = obj.getValue();
console.log(fn()); // 输出 10

        在这个示例中，箭头函数继承了‘getValue‘方法中的‘this‘，因此‘fn()‘调用时，‘this.value‘正确地引用了‘obj‘中的‘value‘。

箭头函数的限制

• 不适合作为方法：由于箭头函数不绑定‘this‘，在定义对象方法时使用箭头函数会导致‘this‘指向全局对象或‘undefined‘。
• 不适合作为构造函数：箭头函数不能用作构造函数，不能与‘new‘关键字一起使用。
• 缺乏‘arguments‘对象：箭头函数内部没有‘arguments‘对象，如果需要访问所有传入参数，必须使用剩余参数。

总结

        函数表达式和箭头函数是JavaScript中函数定义的两种重要方式，各自有着不同的特点和适用场景。函数表达式提供了定义匿名函数的灵活性，而箭头函数则简化了函数的书写，并在处理‘this‘绑定时更加直观。在日常编程中，你可以根据实际需要选择适合的函数定义方式。理解它们之间的差异，将帮助你在编写JavaScript代码时更加高效和灵活。