class Animal {
constructor {
this.name = name;}
say {
console.log;}
}

function Animal {
if ) {
throw new TypeError;怎么说呢，}
this.name = name;}
Object.defineProperty(Animal.prototype。"say",{
至于value，function say {
console.log;},enumerable: false,writable: true。configurable: true
});

You can see it's just a constructor + prototype method plus a safety check.

. extends 的实现细节

A subclass:

class Dog extends Animal {
constructor {
super;this.breed = breed;}
}

Babel 会生成寄生组合继承的大体代码：

function Dog {
Animal.call;// super
this.breed = breed;}
Dog.prototype = Object.create;Dog.prototype.constructor = Dog;
// 静态属性继承
Dog.proto = Animal;

• class 本质仍然是原型链实现，只是多了语法糖和安全检查。
• `super` 在编译后会变成 `Parent.call`和 `Parent.prototype`的访问。
• 从#痛点#来看，当子类忘记调用 `super` 时Babel 会抛出运行时错误。这正是我们在调试时报 “must call super before accessing ‘this’” 的根源。
• 至于#好处#。如果你想手动控制继承细节，直接阅读 Babel 输出能帮你避免踩坑。

. async/await：生成器 + Promise 的自动执行器

#痛点#：`await` 后面的代码好像卡住了但实际线程并未阻塞；老实说，者往往误以为会产生性能瓶颈。

async function fetchUser {
const user = await fetch.n);console.log，return user;}

Babel会把它翻译成状态机形式的大段代码，这里只保留主要结构：

function fetchUser { return regeneratorRuntime.async { while { switch { case 0: context.next=1;return regeneratorRuntime.awrap .n));case1: var user=context.sent;console.log，return _context.abrupt;case4: case"end": return _context.stop;} } })，}

• regeneratorRuntime.async 包装一个生成器，让它自动执行 next；不过，每次遇到 yield就暂停并返回一个 Promise。
• await 被编译为 yield → “让出控制权”。Promise resolve 后再调用 next 把结果送回生成器。
• switch/case 保存当前执行位置，实现类似“记忆”的状态机。
• #好处#这方面。了解这层实现后你会明白为什么 await 后面的代码总是在微任务队列中执行，从而不会阻塞 UI 渲染。
• #痛点#这方面，如果忘记捕获 Promise 错误。状态机内部会把异常抛到全局，引发难以定位的 “Uncaught ” 报错。

. for...of ：迭代协议背后的真相

#痛点#：“for...of 循环报错 ‘xxx is not iterable’”，却找不到对象到底缺少哪个属性。”​​​​​​​​​​​​​​​​​​​​​​​​​ ​​​

javascript

for { console.log;}

Babel 编译后大致如下：

var iteratorNormalCompletion=true;

...

try {

var iterator=arr;

var step;

while).done)){

var item=step.value;

console.log;

}

} catch{

} finally {

简化主要的观点是，

var result=iterator.next;

while{

// 执行循环体

从这里可以看到：

. 模板字面量与标签模板 ：字符串拼接背后的真相

模板字面量用得最多。却常被误认为有隐藏性能调整。Babel 把它们全部降级为普通字符串拼接或数组+函数调用。

const msg=Hello,${name}. You have ${count} messages.;

再看编译后。

var msg='Hello,'.concat.concat;按理说，

若使用标签模板。例如 styled‑components：

const result=styled.div`

再看color，${props=>props.color};

`;

Babel 会拆分静态部分与动态表达式：

var result=styled.div(

function{return props.color;}

);

这样做让 CSS‑in‑JS 库能够在运行时得到模板字符串数组和占位符函数从而进行预处理或缓存。不过，

#启示#:

• template literal 本质上只是更易读的字符串拼接。没有额外运行时代码，按理说，若担心性能，可直接查看 Babel 输出确认没有隐藏开销。
• tagged template 为库提供了“预处理”能力，是实现 CSS‑in‑JS、i18n 等功能的关键基石。
• 说到#痛点#，在调试 styled‑components 时看到的是普通函数调用。而不是模板字符串本身，这正是源码映射失效导致定位困难的根源。