JavaScript 中 return、return true 与 return false 的区别

1. 语法结构与基本行为

第 1 步：理解不带值的 return（终止控制流）

目的：仅用于强制终止当前函数的执行，向调用方返回 undefined。
语法：return; 或 return 表达式;。
效果：函数运行至此立即结束，return 语句之后的所有代码将不再被执行。

// 示例：return 后面的代码被忽略
function demo() {
  return; // 函数在此结束
  console.log("永远不会执行"); 
}

// 示例：带数值的返回
function add(a, b) {
  return a + b; 
  document.write("此处不可达"); // 不执行
}
console.log(add(5, 8)); // 输出 13

在实际应用中，是否需要返回值取决于业务逻辑。如果只是为了触发页面渲染或副作用，可以省略 return；如果需要获取运算结果，必须使用。

第 2 步：分析 return true 的作用

目的：显式地向函数外部返回布尔值 true，通常表示操作成功或继续执行。
场景：常见于条件判断函数中，或者某些 UI 组件需要确认“是否允许”某个操作的回调里。虽然它可以省略（因为无返回值默认视为真），但在状态机逻辑中显式声明更为清晰。

第 3 步：掌握 return false 的核心用途

目的：返回布尔值 false，通常代表错误、失败或中断/取消。
核心特性：在 Web 开发的事件绑定或表单验证中，它的角色极为特殊。

a) 阻断默认行为： 当点击 <a> 标签时，浏览器默认会进行页面跳转；当提交表单时，浏览器默认会刷新并发送请求。在对应的 onclick 或 onsubmit 事件中，如果在处理逻辑末尾返回 false，即可阻止这些默认动作。

b) 局限性注意： 必须牢记，return false 仅仅在当前被调用的函数级别生效。如果函数 A 内部调用了函数 B，而 B 中发生了 return false，这只会终止 B 的执行并将 false 返回给 A。除非 A 也在合适的位置捕获这个值并再次 return false，否则不会影响到调用 A 的外部环境（例如无法阻断原生的表单提交）。

// 阻止表单提交的正确写法
<form onsubmit="return validateForm()">

// 配合验证的函数
function validateForm() {
  if (!checkInput()) {
    return false; // 阻止表单提交并显示错误
  }
  return true; // 允许提交
}

2. 进阶排错与注意事项

常见问题：局部阻止 vs 全局阻止

很多开发者容易误解 return false 的全局效力。请看以下易错点：

function wrapperFunction() {
  doSomething(); // 假设这里有一个 return false
  doSomethingElse(); // 依然会执行！
}

在上面的 wrapperFunction 中，即使 doSomething() 内部有 return false，也仅仅是让 doSomething() 提前退出，wrapperFunction 会继续往下执行。若要真正达到“一旦出错立即退出”的效果，通常需要借助 if (result === false) return false; 的形式逐层透传。

jQuery 时代的遗留习惯

如果你在使用 jQuery，需要注意 e.preventDefault() 和 e.stopPropagation()。在现代原生 JavaScript 中，更推荐显式调用这两个 API 来分别控制事件流与默认动作，而非单纯依赖 return false（尽管它们在某些框架底层可能被封装得看起来一样）。

3. 总结

合理运用 return 系列指令能显著提升代码的逻辑清晰度与健壮性：
- 当你需要跳出循环或提前结束函数且不关心返回值时，使用裸 return；
- 当你需要进行条件校验并希望由调用者决定下一步动作时，使用 true/false；
- 在处理 DOM 事件（尤其是表单和锚点）时，利用 return false 优雅地拦截浏览器默认行为。

以上就是 JavaScript 中 return、return true、return false 三者的用法及详细区别的讲解内容，更多关于前端基础知识的学习资料请关注本站其它相关文章！