JS函数返回值详解：return语句作用与undefined情况

在 JavaScript 中，函数不仅是一组封装逻辑的代码块，更是具备输入处理与结果交付能力的独立计算单元。掌握函数返回值的核心，在于理解 return 语句承担的“值输出”与“控制流中断”双重职责，以及在缺失显式返回语句时引擎自动补全的 undefined 行为规则。

一、return 语句的核心机制与执行流程

当一个函数被调用时，JavaScript 引擎会在调用栈中为其分配专属的执行上下文。函数体内部代码按照自上而下的顺序逐步解析执行。在这个执行周期中，return 语句扮演着最重要的出口角色。

return 语句的本质操作包含两个动作：

1. 交付结果（Value Delivery）：计算紧随其后的表达式，并将求值结果作为该函数调用的最终输出，返回给外层的调用上下文。
2. 中断流程（Control Flow Abort）：立即终止当前函数的执行，后续处于同一执行上下文中的所有语句都会被直接跳过，函数执行栈随之弹出。

function calculateTotal(price, taxRate) {
  const tax = price * taxRate;
  return price + tax; // 计算表达式并将和交出，同时函数在此处终止
  console.log("此行代码永远不会被执行"); // 死代码 (Unreachable code)
}

const total = calculateTotal(100, 0.08); // 变量 total 接收到 108

理解控制流的中断特性，能够帮助我们编写结构更为精炼的代码。例如业界广泛采用的“守卫语句（Guard Clauses）”模式，就是在函数入口处对非法参数进行校验并使用 return 提前退出，从而避免深层嵌套的 if-else 结构。

二、return 语句的双重作用对比与实践

为了在实际开发中写出健壮的逻辑，必须区分 return 在不同使用场景下的侧重点。有时候我们关注的是它的数值回传，有时候仅仅是借助它来掌控执行路径。

三、函数返回 undefined 的四大经典场景与底层机制

初学者在调试 JavaScript 代码时，经常会遇到变量接收到 undefined 的情况。在 ECMAScript 规范定义中，任何一个常规函数的执行结果必须是一个值。如果函数运行完毕但未能获取一个显式的对象或原始值，引擎就会将其解析为 undefined。导致此现象的具体场景可归纳为以下四种：

场景 1：完全未声明 return 语句（隐式自然返回）

只执行一系列副作用操作（如控制台打印、DOM 更新、数据修改），而没有书写 return 语句的函数，被称为过程型函数。当所有语句执行至函数体末尾大括号时，函数隐式返回 undefined。

function printMessage(msg) {
  console.log("Message:", msg);
  // 此处没有 return 语句
}

const result = printMessage("Hello");
console.log(result); // 输出：undefined

场景 2：书写了 return 但未指定具体表达式

为了实现提早退出逻辑，开发者常常单独书写一个 return;。根据语言规范，如果 return 关键字后紧跟的是分号或行结束符，而没有跟随任何表达式，则该语句等价于显式返回 undefined。

function findIndex(arr, target) {
  if (!Array.isArray(arr)) {
    return; // 显式空 return，返回 undefined
  }
  return arr.indexOf(target);
}

console.log(findIndex(null, 10)); // 输出：undefined

场景 3：自动分号插入机制（ASI）导致的换行截断陷阱

这是 JavaScript 语法中最隐蔽、最容易引发线上缺陷的机制之一。JavaScript 引擎拥有自动分号插入（Automatic Semicolon Insertion，简称 ASI）机制。当解析器看到 return 语句且其后紧接着一个换行符时，解析器会认为该语句已经结束，并在换行位置自动插入分号！

function getUserProfile() {
  // 错误写法：return 后面换行
  return 
  {
    name: "Alice",
    role: "Admin"
  };
}

console.log(getUserProfile()); // 输出：undefined，而不是预期的对象！

上述代码在经过引擎解析后，实际上被转换为了：

function getUserProfile() {
  return; // 引擎自动在此处补全了分号！直接返回 undefined
  {
    name: "Alice",
    role: "Admin"
  }; // 此处变为了一个普通的代码块，且属于不可达代码
}

正确规范：表达式的首个符号必须与 return 处于同一物理行；若返回较长的对象字面量或多行 JSX，应将左大括号或左圆括号置于 return 同行：

function getUserProfile() {
  return { // 左花括号紧随 return 同行
    name: "Alice",
    role: "Admin"
  };
}

场景 4：表达式本身求值结果即为 undefined

当 return 后面紧接的表达式本身计算出的值就是 undefined 时，函数自然会向外传递该值。这通常发生在读取未赋值变量、对象上不存在的属性、或调用了另一个没有返回值的函数时。

function getProperty() {
  const config = { host: "localhost" };
  return config.port; // 属性 port 未定义，求值为 undefined
}

console.log(getProperty()); // 输出：undefined

四、常见易混淆说法辨析

在技术交流或教程阅读中，常常会遇到一些看似合理但不够精确的说法。我们在此进行客观拆解与修正：

五、构造函数与异步函数中的特殊返回值行为

除常规函数外，JavaScript 中的两类特殊函数在返回值处理上有特别的规则：

1. 构造函数（使用 new 调用）

使用 new Func() 调用构造函数时，默认会返回新创建的实例对象 this：

• 若显式 return 了一个原始类型（如字符串、数字、布尔值或 undefined），该返回值会被完全忽略，调用结果依然是 this 实例。
• 若显式 return 了一个对象类型（如 { a: 1 } 或数组），则该对象会覆盖原本创建的 this 实例，成为 new 表达式的最终结果。

2. 异步函数（async function）

无论 async 函数内部显式返回什么值，外部接收到的永远是一个 Promise 对象：

• 若 return 100;，等价于返回 Promise.resolve(100)。
• 若没有书写 return，等价于返回 Promise.resolve(undefined)。
• 若抛出异常 throw new Error();，则返回一个 Rejected 状态的 Promise。

六、函数返回值设计与自查清单

在日常编写与重构函数时，可以依据以下清单进行设计与自查，确保数据流转清晰明确。