从奶茶店悟透 JavaScript:递归、继承、浮点数精度、尾递归全解析(通俗易懂版)

🍰 一、背景:为什么要学这些"烧脑"的东西?

因为------

"JavaScript 的运行机制,决定了你能写出多聪明的代码。"

继承递归,从 浮点数精度尾递归优化

每一个小知识点都在考验你对「执行机制」的理解。

那我们就从生活出发------

在奶茶店里,轻松掌握最难懂的 JS 知识!🧋


🧩 二、继承篇:拜师学艺的故事(第191~195页)

💡 什么是继承?

继承就是"徒弟继承师傅的技能"。

在 JS 里,子类通过 extends 或原型链获得父类的属性与方法。

scala 复制代码
class Parent {
  constructor() {
    this.name = '奶茶师傅';
  }
  sayHi() {
    console.log('我是' + this.name);
  }
}
class Child extends Parent {
  constructor() {
    super();
    this.name = '学徒';
  }
}
new Child().sayHi(); // 我是学徒

🍵 类比:

师傅教徒弟泡奶茶,徒弟学基础配方(super()),

还自己加点珍珠创新(重写属性)。


🌱 常见继承方式总结

方式 解释 缺点 奶茶店比喻
原型链继承 子类原型 = 父类实例 属性共享会串味 徒弟共用一桶奶茶
构造函数继承 Parent.call(this) 方法没继承 每人独立桶但没笔记
组合继承 call + 原型链 多调用一次父构造 有桶又有笔记
寄生组合继承 Object.create 优化版 ✅完美方案 徒弟拿到副本手册
ES6 extends 语法糖 简洁优雅 一键拜师系统

🧠 一句话总结:

"原型串味,构造孤单,组合平衡,寄生完美,extends最甜。"


☕ 三、浮点数篇:糖粉称不准的秘密(第196~200页)

💻 经典面试题:

ini 复制代码
0.1 + 0.2 === 0.3 // ❌ false

🤯 为什么?

因为 JS 的数字是用 IEEE754 双精度浮点数 存储的,

十进制小数(比如 0.1)在二进制中是无限循环小数


🍰 类比:

就像奶茶店的电子秤,最小单位是 0.0001g。

你称 0.1 克糖粉,其实是 0.100000000000000005 克。

三杯叠起来当然不等于 0.3 啦 😅。


💡 解决方案:

方法 示例 原理 奶茶店比喻
toFixed (0.1+0.2).toFixed(2) 保留小数位 人工修整重量
放大再缩小 (0.1*10+0.2*10)/10 避免小数 先称10勺再除10
EPSILON Math.abs(a-b)<Number.EPSILON 误差容忍 "味差尝不出算合格"

🌈 记忆口诀:

"浮点秤不准,放大称一吨;

误差不纠结,EPSILON兜底!"


🧠 四、递归篇:店员层层传话的任务系统(第201~205页)

💡 普通递归

scss 复制代码
function sum(n) {
  if (n === 1) return 1;
  return n + sum(n - 1);
}
console.log(sum(5)); // 15

🍵 类比:

老板要知道第5杯销量,店员A问B、B问C......一直问到底。

每个人都要记住上一个问题 → 记忆堆积。


💫 尾递归(Tail Recursion)

ini 复制代码
function sum(n, total = 0) {
  if (n === 1) return total + 1;
  return sum(n - 1, total + n);
}
console.log(sum(5)); // 15

🍰 类比:

换成"接力统计表":每人只更新总数,不需要记忆前面。

这样永远只用一张纸,不会爆栈!

✅ 优点:

  • 空间占用少;
  • 执行更快;
  • 不会 Stack Overflow。

🌳 五、树形递归:点名制茶团队(第209~210页)

css 复制代码
let team = {
  name: '店长',
  children: [
    { name: '收银员', children: [{ name: '点单A' }, { name: '点单B' }] },
    { name: '制茶师', children: [{ name: '调茶A' }, { name: '调茶B' }] }
  ]
};

function traverse(node) {
  console.log(node.name);
  node.children?.forEach(traverse);
}
traverse(team);

✅ 输出:

css 复制代码
店长
收银员
点单A
点单B
制茶师
调茶A
调茶B

🍵 类比:

店长喊名字,收银员喊助手,层层点名考勤~

这就是"树形结构遍历"。


🎀 六、总结图表:奶茶店的 JS 学习地图

知识点 概念一句话 奶茶店比喻
原型链继承 子类原型指父类 徒弟共用奶茶桶
构造继承 call父构造 每人独立原料
寄生组合继承 Object.create优化 徒弟拿副本手册
浮点数精度 二进制误差 糖粉称偏差
toFixed 保留小数位 修整秤结果
尾递归 不堆栈 接力传单
树形递归 层层遍历结构 点名制茶团队
相关推荐
邋遢道15 分钟前
# 企业级 Agent 从 0 到 1(二):技术选型与最小骨架
前端·chrome
计算机魔术师19 分钟前
我看了 OpenAI 首席科学家的最新长文,把原来的认知推翻了一遍
前端
乱码三千1 小时前
使用ComfyUI+MinMax-H3音视频模型生成视频
前端·后端·github
Coder_Ke1 小时前
代码我都定位了,Codex 还在考古:于是我写了个 VS Code 插件
前端
LiaCode2 小时前
别让 AI 把仓库写成“代码平行宇宙”:从 Deslop 看生成前查重
前端·后端·github
nice先生的狂想曲2 小时前
javascript高级程序设计(六)——2026.9.5
前端·javascript
光影少年2 小时前
如何做大型React+RN 项目架构设计、目录规范
前端·react native·react.js
一位正在转型AI全栈的前端工程师2 小时前
AI 全栈学习之旅 -Week 8:从单 Agent 到多 Agent 协作:LangGraph 实战与记忆持久化
前端·python
用户921080262862 小时前
Promise 和 async/await:从用途到执行机制
前端
yyt3630458413 小时前
KLineChartQuant:GLSL 的精度问题及 RTC 解法
前端·vue.js·react.js·交互·图形渲染·webgl·数据可视化