🍰 一、背景:为什么要学这些"烧脑"的东西?
因为------
"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 | 保留小数位 | 修整秤结果 |
尾递归 | 不堆栈 | 接力传单 |
树形递归 | 层层遍历结构 | 点名制茶团队 |