JavaScript函数表达式详解|极客笔记

JavaScript函数表达式详解

在JavaScript中，函数是一等公民，这意味着函数可以像任何其他数据类型一样被存储在变量中，作为参数传递给其他函数，甚至作为另一个函数的返回值。函数表达式是一种在变量中存储函数的灵活方式，它与函数声明相比具有一些特殊的特征和用法。本文将详细介绍JavaScript函数表达式的概念、语法和用法。

什么是函数表达式？

函数表达式是一种定义函数的方式，也就是把函数作为值赋给变量。相比于函数声明（function declaration），函数表达式在解释器执行代码时才会被赋值，这也意味着函数表达式可以在运行时动态创建和使用。

函数表达式的语法

函数表达式的语法如下：

var functionName = function(parameters) {
  // 函数体
};

其中，functionName 是可选的变量名称，用来引用该函数，parameters 是函数的参数列表，函数体 是函数执行的代码块。

下面是一个简单的函数表达式示例：

var greet = function(name) {
  console.log("Hello, " + name + "!");
};

greet("Alice"); // 输出：Hello, Alice!

匿名函数表达式

函数表达式中的函数可以是匿名函数，这意味着函数没有名称。

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

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

在上面的示例中，add 是一个匿名函数，虽然它没有名称，但它被赋值给 add 变量，然后可以像使用其他函数一样调用。

函数表达式作为回调函数

函数表达式经常用作回调函数，即作为另一个函数的参数传递进去，在某个事件发生或条件满足时被调用。

var numbers = [1, 2, 3, 4, 5];
var squares = numbers.map(function(num) {
  return num * num;
});

console.log(squares); // 输出：[1, 4, 9, 16, 25]

在上面的示例中，map 方法接受一个函数作为参数，该函数定义了对数组中每个元素的操作，并返回一个新数组。

立即调用的函数表达式（IIFE）

立即调用的函数表达式（Immediately Invoked Function Expression，IIFE）是一种在定义后立即执行的函数表达式。

(function() {
  console.log("I am an IIFE!");
})();

IIFE 可以在定义后立即被调用执行，避免了全局作用域污染，并且在作用域内部可以定义私有变量和函数。

自执行函数表达式

自执行函数表达式（Self-Executing Function Expression）是一种函数表达式，在定义后立即执行自身。

var result = function() {
  return 2 + 2;
}();

console.log(result); // 输出：4

函数表达式 vs 函数声明

函数表达式和函数声明有一些区别，最主要的区别是函数声明提升（hoisting）、作用域和函数名的可见性。

// 函数声明
sayHello(); // 正常执行

function sayHello() {
  console.log("Hello!");
}

// 函数表达式
sayHi(); // 报错：TypeError: sayHi is not a function

var sayHi = function() {
  console.log("Hi!");
};

在上面的示例中，函数声明可以在函数定义之前被调用，因为函数声明会被提升到作用域的顶部。而函数表达式不会提升，所以在函数定义之前调用函数表达式会报错。

箭头函数表达式

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

var double = (num) => num * 2;

console.log(double(3)); // 输出：6

箭头函数表达式没有自己的 this，this 指向封闭作用域的 this，更适用于简单的函数逻辑。

总结

函数表达式是一种灵活的定义函数的方式，在 JavaScript 中有着广泛的应用。通过函数表达式可以更方便地进行函数的传递、组合和模块化开发。在实际开发中，根据不同的场景和需求选择合适的函数表达式定义方式，可以提高代码的可维护性和可读性。

JavaScript函数表达式详解