JavaScript教程：深入理解函数表达式与函数声明

JavaScript教程：深入理解函数表达式与函数声明

ko.javascript.info 모던 JavaScript 튜토리얼(The Modern JavaScript Tutorial in Korean ) 项目地址: https://gitcode.com/gh_mirrors/ko/ko.javascript.info

引言

在JavaScript中，函数是一等公民，这意味着函数可以像其他值一样被传递和使用。理解函数表达式和函数声明的区别对于编写高质量的JavaScript代码至关重要。本文将深入探讨这两种函数定义方式的特性、差异以及适用场景。

函数表达式基础

函数表达式是将函数定义为表达式的一部分（通常是变量赋值）的方式：

let sayHi = function() {
  console.log("Hello");
};

这里的关键点：

• 函数被创建并赋值给变量sayHi
• 函数没有名称（匿名函数）
• 以分号结尾，因为这是一个完整的语句

函数声明基础

函数声明是独立声明一个函数的语法：

function sayHi() {
  console.log("Hello");
}

特点：

• 函数有自己的名称标识符
• 作为独立语句存在，不需要分号结尾
• 可以在定义前被调用（函数提升）

核心区别解析

1. 创建时机

函数声明会在代码执行前的准备阶段被创建，这就是为什么可以在声明前调用：

// 可以正常工作
sayHi(); 

function sayHi() {
  console.log("Hello");
}

函数表达式则是在执行流到达时才会创建：

// 会抛出错误
sayHi(); 

let sayHi = function() {
  console.log("Hello");
};

2. 作用域差异

在严格模式下，函数声明在代码块内部的作用域表现特殊：

"use strict";

let age = 16;

if (age < 18) {
  function welcome() {
    console.log("Hello!");
  }
} else {
  function welcome() {
    console.log("Greetings!");
  }
}

welcome(); // 错误：welcome未定义

而使用函数表达式则能正常工作：

"use strict";

let age = 16;
let welcome;

if (age < 18) {
  welcome = function() {
    console.log("Hello!");
  };
} else {
  welcome = function() {
    console.log("Greetings!");
  };
}

welcome(); // 正常执行

3. 语法位置

函数声明必须是独立的语句，而函数表达式可以作为更大表达式的一部分：

// 函数表达式作为立即执行函数
(function() {
  console.log("立即执行");
})();

// 函数表达式作为回调
setTimeout(function() {
  console.log("延迟执行");
}, 1000);

回调函数深入

回调函数是函数表达式最常见的应用场景之一：

function ask(question, yesCallback, noCallback) {
  if (confirm(question)) yesCallback();
  else noCallback();
}

ask(
  "你同意吗？",
  function() { console.log("你同意了"); }, // 匿名函数表达式
  function() { console.log("你拒绝了"); }  // 匿名函数表达式
);

回调函数的优势：

• 允许延迟执行
• 提供灵活的代码组织方式
• 便于实现异步编程模式

最佳实践建议

1. 优先使用函数声明：除非有特殊需求，否则函数声明提供了更好的可读性和灵活性。

2. 需要条件创建函数时使用表达式：当需要根据条件动态创建不同函数时，函数表达式是更好的选择。

3. 回调函数使用表达式：特别是当函数只在一个地方使用时，匿名函数表达式更简洁。

4. 注意作用域限制：在代码块内定义函数时，要特别注意函数声明的作用域限制。

总结对比表

| 特性 | 函数声明 | 函数表达式 | |---------------------|-------------------------|-------------------------| | 语法位置 | 独立语句 | 表达式的一部分 | | 创建时机 | 代码执行前 | 执行流到达时 | | 提升 | 是 | 否 | | 块级作用域内可用性 | 严格模式下仅块内 | 取决于变量作用域 | | 典型用途 | 通用函数定义 | 回调、条件函数创建 |

理解这些差异将帮助开发者根据具体场景选择最合适的函数定义方式，写出更清晰、更易维护的JavaScript代码。

ko.javascript.info 모던 JavaScript 튜토리얼(The Modern JavaScript Tutorial in Korean ) 项目地址: https://gitcode.com/gh_mirrors/ko/ko.javascript.info