从奶茶店悟透 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 保留小数位 修整秤结果
尾递归 不堆栈 接力传单
树形递归 层层遍历结构 点名制茶团队
相关推荐
pas1362 小时前
40-mini-vue 实现三种联合类型
前端·javascript·vue.js
摇滚侠2 小时前
2 小时快速入门 ES6 基础视频教程
前端·ecmascript·es6
珑墨3 小时前
【Turbo】使用介绍
前端
军军君013 小时前
Three.js基础功能学习十三:太阳系实例上
前端·javascript·vue.js·学习·3d·前端框架·three
打小就很皮...4 小时前
Tesseract.js OCR 中文识别
前端·react.js·ocr
wuhen_n5 小时前
JavaScript内存管理与执行上下文
前端·javascript
Hi_kenyon5 小时前
理解vue中的ref
前端·javascript·vue.js
落霞的思绪7 小时前
配置React和React-dom为CDN引入
前端·react.js·前端框架
Hacker_Z&Q7 小时前
CSS 笔记2 (属性)
前端·css·笔记
Anastasiozzzz7 小时前
LeetCode Hot100 295. 数据流的中位数 MedianFinder
java·服务器·前端