笔记

JavaScript 中 `return` 关键字详解：从基础到进阶的「函数控制指南」

在学习 JavaScript 的过程中，return 是最常接触却也最易让人困惑的关键字之一。它像函数内部的「交通警察」，既负责传递结果，又掌控执行流程。本文将从底层逻辑出发，结合具体场景，帮你彻底理解 return 的行为规则，并避开新手常踩的「坑」。

一、`return` 的核心职责：结果传递与执行终止

要理解 return，首先需要明确 函数的本质：函数是一段可复用的代码块，接收输入（参数），经过逻辑处理后，输出结果（或无结果）。return 的核心作用就是定义这个输出结果，并控制函数的执行生命周期。

1. 结果传递：函数的「输出接口」

函数的本质是「输入→处理→输出」的流程，而 return 就是这个流程的「输出接口」。它将函数内部计算的结果传递给调用者（即触发函数执行的代码位置），供后续逻辑使用。

示例 1：基础返回值

// 定义一个加法函数，接收两个参数 a 和 b
function add(a, b) {
  const sum = a + b;  // 计算两数之和
  return sum;         // 通过 return 将 sum 传递给调用者
}

// 调用 add 函数，接收返回值并打印
const result = add(2, 3); 
console.log(result);  // 输出：5（sum 的值被传递到这里）

关键点：return sum 会将变量 sum 的值（即 5）复制一份，传递给 result 变量。原函数中的 sum 变量在函数执行结束后会被销毁，但返回值会被保留并传递给调用者。

示例 2：无返回值的情况

如果函数不写 return，或 return 后没有任何值，JavaScript 会默认返回一个特殊的值 undefined（表示「未定义」）。

// 情况 1：没有 return 语句
function sayHello() {
  console.log("你好，世界！");
}
const helloResult = sayHello(); 
console.log(helloResult);  // 输出：undefined（函数没有返回值）

// 情况 2：有 return 但无值
function noReturnValue() {
  return;  // 等价于 return undefined
}
const noValueResult = noReturnValue(); 
console.log(noValueResult);  // 输出：undefined

注意：undefined 是 JavaScript 的原始数据类型之一，表示「变量未赋值」或「函数无返回值」。新手常误以为「不写 return 函数就没有输出」，但实际上它输出了一个隐含的 undefined。

2. 执行终止：函数的「紧急刹车」

return 的另一个核心作用是立即终止函数的执行。一旦函数运行到 return 语句，后续的所有代码（包括同一函数内的其他语句或 return）都不会被执行。这类似于程序中的「紧急停止」按钮。

示例 3：`return` 终止执行

function validateNumber(num) {
  // 第一步：检查输入是否为数字类型
  if (typeof num !== "number") {
    return "错误：输入不是数字";  // 触发 return，函数立即终止
  }

  // 第二步：如果输入是数字，继续执行后续逻辑（这行永远不会被执行）
  console.log("输入是有效数字，开始计算...");
  return num * 2;  // 这行也不会被执行（因为前面的 return 已终止函数）
}

// 测试 1：传入非数字（触发第一步的 return）
const result1 = validateNumber("abc"); 
console.log(result1);  // 输出："错误：输入不是数字"（后续代码未执行）

// 测试 2：传入数字（正常执行到 return）
const result2 = validateNumber(5); 
console.log(result2);  // 输出：undefined（因为第一步的 if 条件不满足，进入第二步，但第二步的 return 未被触发？不，这里需要修正示例）

修正后的示例（更清晰）：

function validateNumber(num) {
  if (typeof num !== "number") {
    return "错误：输入不是数字";  // 触发 return，函数终止
  }
  console.log("输入是有效数字，开始计算...");  // 仅当输入是数字时执行
  return num * 2;  // 输入是数字时，返回计算结果
}

// 测试 1：传入非数字（触发 return）
const result1 = validateNumber("abc"); 
console.log(result1);  // 输出："错误：输入不是数字"（console.log("输入是有效数字...") 未执行）

// 测试 2：传入数字（正常执行所有代码直到 return）
const result2 = validateNumber(5); 
console.log(result2);  // 输出：10（先打印 "输入是有效数字..."，再返回 10）

关键点：return 的位置决定了函数执行的最大范围。在示例中，若输入不是数字，函数在 return 处停止，后续的 console.log 和 return num * 2 都不会执行；若输入是数字，则会完整执行所有代码并返回结果。

二、JavaScript 中 `return` 的「特殊规则」

JavaScript 作为一门灵活的语言，return 的行为在某些场景下会与其他语言（如 Java、Python）不同。理解这些规则能帮你避免「语法错误」和「逻辑错误」。

1. 箭头函数的「隐式返回」：简洁但有限制

ES6（ECMAScript 2015）引入了箭头函数（=>），它是一种更简洁的函数写法。箭头函数有一个特殊特性：如果函数体只有一行代码，可以省略大括号 {} 和 return 关键字，直接返回结果（称为「隐式返回」）。

示例 4：箭头函数的隐式返回

// 传统函数写法（显式 return）
const squareTraditional = function(n) {
  return n * n;  // 显式使用 return
};

// 箭头函数隐式返回（省略 {} 和 return）
const squareArrow = (n) => n * n;  // 效果与传统写法完全一致

console.log(squareTraditional(4));  // 输出：16
console.log(squareArrow(4));        // 输出：16

限制条件：如果函数体包含多行代码（例如需要先计算再返回，或包含其他操作），则必须使用大括号 {}，并且需要显式使用 return 关键字，否则无法返回值。

错误示例：多行代码时误用隐式返回

// 错误写法：多行代码却省略 {}
const addAndLogWrong = (a, b) => 
  const sum = a + b;          // 报错：Unexpected token 'const'（缺少 {} 时，箭头函数只能有一行代码）
  console.log("和为：", sum); 
  return sum;

// 正确写法：多行代码必须用 {} 和显式 return
const addAndLogCorrect = (a, b) => {
  const sum = a + b;          // 第一步：计算和
  console.log("和为：", sum);  // 第二步：打印和
  return sum;                 // 第三步：返回和
};

总结：箭头函数的隐式返回是语法糖（简化写法），但仅适用于单行代码的场景。多行逻辑仍需显式 return。

2. `return` 的「作用域限制」：只能在函数或模块中使用

JavaScript 规定，return 语句只能在函数内部或 ES6 模块（.mjs 文件）中使用。如果在非函数的代码块（如 if、for、while 等）中直接使用 return，JavaScript 解释器会抛出 SyntaxError: Illegal return statement（非法 return 语句）错误。

示例 5：错误使用 `return` 的场景

// 错误 1：在 if 块中使用 return（非函数作用域）
if (true) {
  return "这行代码永远不会执行";  // 报错！
}

// 错误 2：在 for 循环中使用 return
for (let i = 0; i < 3; i++) {
  return i;  // 报错！
}

// 错误 3：在全局作用域中使用 return（不在任何函数内）
console.log("开始");
return;  // 报错！

原因：return 的设计目的是控制函数的执行流程，而全局作用域（所有代码的最外层）或非函数的代码块（如 if）没有「函数执行上下文」，因此无法使用 return。

3. 异步函数（`async`）中的 `return`：返回 Promise 对象

ES2017 引入了 async 函数（异步函数），用于简化异步操作（如网络请求、文件读取）的处理。在 async 函数中，return 的行为与普通函数不同：return 的值会被自动包装成一个「已解决的 Promise」对象。

示例 6：`async` 函数的 `return` 行为

// 定义一个 async 函数（异步函数）
async function fetchData() {
  // 模拟异步操作（如网络请求）
  const data = "数据加载完成";
  return data;  // 返回值会被包装成 Promise
}

// 直接调用 async 函数，得到的是 Promise 对象
const promise = fetchData();
console.log(promise);  // 输出：Promise {<fulfilled>: "数据加载完成"}

// 要获取实际的返回值，需要使用 .then() 或 await
// 方式 1：使用 .then()（Promise 的回调方法）
promise.then(result => {
  console.log(result);  // 输出："数据加载完成"
});

// 方式 2：在另一个 async 函数中使用 await（需在 async 函数内）
async function main() {
  const result = await fetchData();  // await 会等待 Promise 解决，并返回结果
  console.log(result);  // 输出："数据加载完成"
}
main();

关键概念：
- Promise：JavaScript 中用于表示异步操作最终完成或失败的对象。async 函数的 return 值会被包装成 Promise.resolve(returnValue)（已解决的 Promise）。
- .then() 方法：Promise 的回调方法，当 Promise 被解决（成功）时，会执行 .then() 中的函数，并将结果作为参数传入。
- await 关键字：只能在 async 函数中使用，用于暂停执行，等待 Promise 解决后继续。它会「解包」Promise 中的结果，直接返回实际值。

三、新手必避的「`return` 常见误区」

即使理解了 return 的基础规则，新手在实际编码中仍容易踩以下「坑」。提前了解这些误区，能帮你写出更健壮的代码。

误区 1：忘记 `return`，导致结果为 `undefined`

许多新手在编写函数时，专注于实现功能逻辑，却忘记用 return 传递结果。这会导致函数返回 undefined，后续使用该结果时出现错误。

错误示例：忘记 `return`

function calculateArea(radius) {
  const area = Math.PI * radius * radius;  // 计算圆的面积
  // 忘记写 return！
}

const circleArea = calculateArea(5);
console.log(circleArea);  // 输出：undefined（因为没有 return）

解决方法：明确函数的「输出目标」。如果函数需要返回结果（如计算值），必须在逻辑结束后添加 return 语句。

误区 2：多余的 `return` 导致逻辑中断

有时为了「保险」，新手会在函数末尾多写一个 return，但可能不小心将其放在条件判断之外，导致前面的逻辑被覆盖。

错误示例：多余的 `return`

function getDiscount(price) {
  if (price > 100) {
    return price * 0.8;  // 满 100 减 20（打 8 折）
  }
  // 以下代码永远不会执行（因为无论 price 是否大于 100，函数都会在最后 return）
  console.log("价格无折扣"); 
  return price; 
}

const finalPrice = getDiscount(80);
console.log(finalPrice);  // 输出：80（但 "价格无折扣" 不会被打印）

问题分析：函数末尾的 return 会导致无论条件是否满足，函数都会在此处终止。因此，console.log("价格无折扣") 永远不会执行。
解决方法：调整 return 的位置，确保所有逻辑路径都被正确覆盖。例如，将末尾的 return 放在 else 块中：

function getDiscount(price) {
  if (price > 100) {
    return price * 0.8;
  } else {
    console.log("价格无折扣"); 
    return price; 
  }
}

误区 3：在 `finally` 块中使用 `return` 导致意外行为

在 try...catch...finally 结构中，finally 块的代码无论是否触发 return 或抛出错误，都会执行。如果在 try 或 catch 块中使用 return，finally 块的代码会在 return 之前执行，但最终的返回值仍由 try 或 catch 中的 return 决定。

示例 7：`finally` 中的 `return` 行为

function testFinally() {
  try {
    return "来自 try";  // 触发 return，但 finally 会先执行
  } catch (error) {
    return "来自 catch";
  } finally {
    console.log("finally 块执行了");  // 这行会先打印
  }
}

const result = testFinally();
console.log(result);  // 输出："finally 块执行了" → "来自 try"

执行顺序：
1. try 块中的 return 被触发，函数准备返回 "来自 try"。
2. 在返回前，JavaScript 引擎会先执行 finally 块中的代码（打印 "finally 块执行了"）。
3. 最后，函数返回 try 块中 return 的值 "来自 try"。
注意：如果在 finally 块中也写 return，它会覆盖 try 或 catch 中的 return 值：

function testFinallyOverride() {
  try {
    return "来自 try";
  } finally {
    return "来自 finally";  // 覆盖 try 中的 return
  }
}

const result = testFinallyOverride();
console.log(result);  // 输出："来自 finally"

总结：`return` 是函数的「控制核心」

return 关键字在 JavaScript 中扮演着双重角色：它既是函数的「输出接口」（传递结果），也是函数的「执行开关」（终止流程）。掌握它的核心规则（结果传递、执行终止），理解其在箭头函数、异步函数中的特殊行为，并避开常见误区（如忘记 return、多余 return），能帮你写出更高效、健壮的代码。

下次编写函数时，不妨多问自己两个问题：

我需要传递什么结果？（明确 return 的值）
在哪里终止函数的执行最合理？（确定 return 的位置）

当你能主动思考这些问题时，说明你已经真正掌握了 return 的精髓——它不再是简单的「关键字」，而是你控制函数行为的「编程工具」。

如果觉得文章对你有用，请随意赞赏

return JavaScript

JavaScript 中 `return` 关键字详解：从基础到进阶的「函数控制指南」

https://www.xingyeji.com/archives/javascript-return-guan-jian-zi-xiang-jie

作者

星野集

发布于

2025-08-11

更新于

2025-08-11

许可协议

CC BY 4.0

JavaScript 中 `return` 关键字详解：从基础到进阶的「函数控制指南」

一、return 的核心职责：结果传递与执行终止

1. 结果传递：函数的「输出接口」

示例 1：基础返回值

示例 2：无返回值的情况

2. 执行终止：函数的「紧急刹车」

示例 3：return 终止执行

二、JavaScript 中 return 的「特殊规则」

1. 箭头函数的「隐式返回」：简洁但有限制

示例 4：箭头函数的隐式返回

错误示例：多行代码时误用隐式返回

2. return 的「作用域限制」：只能在函数或模块中使用

示例 5：错误使用 return 的场景

3. 异步函数（async）中的 return：返回 Promise 对象

示例 6：async 函数的 return 行为

三、新手必避的「return 常见误区」

误区 1：忘记 return，导致结果为 undefined

错误示例：忘记 return

误区 2：多余的 return 导致逻辑中断

错误示例：多余的 return

误区 3：在 finally 块中使用 return 导致意外行为

示例 7：finally 中的 return 行为

总结：return 是函数的「控制核心」

作者

发布于

更新于

许可协议

评论

一、`return` 的核心职责：结果传递与执行终止

示例 3：`return` 终止执行

二、JavaScript 中 `return` 的「特殊规则」

2. `return` 的「作用域限制」：只能在函数或模块中使用

示例 5：错误使用 `return` 的场景

3. 异步函数（`async`）中的 `return`：返回 Promise 对象

示例 6：`async` 函数的 `return` 行为

三、新手必避的「`return` 常见误区」

误区 1：忘记 `return`，导致结果为 `undefined`

错误示例：忘记 `return`

误区 2：多余的 `return` 导致逻辑中断

错误示例：多余的 `return`

误区 3：在 `finally` 块中使用 `return` 导致意外行为

示例 7：`finally` 中的 `return` 行为

总结：`return` 是函数的「控制核心」