从奶茶店悟透 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 保留小数位 修整秤结果
尾递归 不堆栈 接力传单
树形递归 层层遍历结构 点名制茶团队
相关推荐
吃糖的小孩28 分钟前
从只读页面到可控真实探针:我如何给 Owner Console 加手动诊断
前端
谷无姜29 分钟前
为什么你的性能优化无效?可能是"木桶效应"在作祟
前端·性能优化
雾非雾32 分钟前
《基于具身交互智能数字人技术:如何打造AI数字人宣讲平台"红厅智播”》
前端
Revolution6141 分钟前
一段 JavaScript 代码执行时,到底发生了什么
前端·javascript
智能起源43 分钟前
关于元素层级过多,导致压祯的问题(使用winform或者WPF应用的webview组件嵌套网页时,动效卡顿问题)
前端
Old Uncle Tom1 小时前
银行用户画像 -- 金融目标与需求意图
前端·人工智能·金融
IT_陈寒2 小时前
Vue的响应式让我加班到凌晨3点,原来问题出在这
前端·人工智能·后端
东方小月2 小时前
从0开发一个 Coding Agent(一):前言
前端·人工智能·typescript
恋猫de小郭2 小时前
Flutter 全新真 3D 实现,用 flutter_scene 能开发一个「我的世界」
android·前端·flutter