从奶茶店悟透 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 保留小数位 修整秤结果
尾递归 不堆栈 接力传单
树形递归 层层遍历结构 点名制茶团队
相关推荐
程序员爱钓鱼7 小时前
Node.js 编程实战:文件读写操作
前端·后端·node.js
PineappleCoder7 小时前
工程化必备!SVG 雪碧图的最佳实践:ID 引用 + 缓存友好,无需手动算坐标
前端·性能优化
JIngJaneIL7 小时前
基于springboot + vue古城景区管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
敲敲了个代码8 小时前
隐式类型转换:哈基米 == 猫 ? true :false
开发语言·前端·javascript·学习·面试·web
澄江静如练_8 小时前
列表渲染(v-for)
前端·javascript·vue.js
JustHappy8 小时前
「chrome extensions🛠️」我写了一个超级简单的浏览器插件Vue开发模板
前端·javascript·github
Loo国昌8 小时前
Vue 3 前端工程化:架构、核心原理与生产实践
前端·vue.js·架构
sg_knight8 小时前
拥抱未来:ECMAScript Modules (ESM) 深度解析
开发语言·前端·javascript·vue·ecmascript·web·esm
LYFlied8 小时前
【每日算法】LeetCode 17. 电话号码的字母组合
前端·算法·leetcode·面试·职场和发展