话说回来，

再看手写三大主要，Promise、Event Bus、深拷贝

这三道题是面试中的“照妖镜”。很多候选人在以下痛点上卡壳：

• 深拷贝忘记处理循环引用或 Symbol，导致栈溢出或属性缺失。
• Event Bus没有提供一次性订阅或取消订阅的能力，导致内存泄漏。
• Promise状态切换不严格、链式调用失效、缺少微任务调度，面试官会直接挑出这些细节。

只要把主要原理写清楚，就能在面试中展现扎实的基础。下面分别给出基础版 → 进阶版 → 面试最优解的实现，并标注关键注意点。

一、手写深拷贝

1️⃣ 基础版

function deepClone {
// 1️⃣ 处理 null 与基本类型
if {
return obj;}
// 2️⃣ 根据类型创建容器
const clone = Array.isArray?: {}，// 3️⃣ 只遍历自身属性
for {
if ) {
clone = deepClone;}
}
return clone;}

2️⃣ 进阶版

function deepClone) {
// 基础类型直接返回
if return obj;// 循环引用检测
if ) return hash.get;// Date / RegExp 专门处理
if return new Date;if return new RegExp;// 函数一般直接复用
if return obj;// 保留原型链
const clone = Array.isArray
: Object.create);hash.set，其实，// Symbol 类型的 key
const symbols = Object.getOwnPropertySymbols;for {
clone = deepClone;}
// 普通属性递归拷贝
for {
if ) {
clone = deepClone;}
}
return clone;}
// 测试
const obj = { a: { b: },d: new Date };obj.self = obj;// 循环引用
const cloned = deepClone;console.log，// 不会出现栈溢出

3️⃣ 简化版

function deepClone) {
if return obj;if ) return cache.get;说起来，const clone = Array.isArray?: {}，cache.set;Reflect.ownKeys.forEach(key => {
clone = deepClone;})，return clone;}

关键点回顾：

• WeakMap 用于记录已复制对象，天然防止内存泄漏。
• Reflect.ownKeys 能拿到 Symbol 与不可枚举属性。
• 函数通常不需要深拷贝，直接复用即可。

二、手写 Event Bus

1️⃣ 基础实现 & 常见痛点说明

Pain point: 面试官经常问「如果在回调里 调用 .off,会不会导致数组遍历异常？」所以我们在遍历前先复制一份回调列表。

class EventBus {
constructor {
this.events = {};// { eventName: }
}
/*** Subscribe ***/
on {
if this.events =;this.events.push;// 返回取消订阅函数，React/Vue useEffect 可直接使用
return => this.off;}
/*** Subscribe once ***/
once {
const wrapper = => {
callback;this.off，};wrapper.raw = callback;// 标记原始函数，off 时可识别
this.on;}
/*** Emit ***/
emit {
const callbacks = this.events;if return，// 防止回调里修改原数组导致遍历错位
.forEach(cb => {
try { cb;} catch{ console.error;}
})，}
/*** Unsubscribe ***/
off {
if { delete this.events;return，}
const list = this.events;if return，const idx = list.findIndex;if list.splice;if delete this.events;}
/*** Clear all ***/
clear { this.events = {};}
}
// 使用示例
const bus = new EventBus;const handler = data => console.log;bus.on，bus.emit;// 收到: {x:10,y:20}
bus.once => console.log);不过，bus.emit，// 输出一次
bus.emit;// 不输出
bus.off;

2️⃣ Vue 风格的事件总线

class VueEventBus {
constructor { this.events = new Map;}
$on{
if ) this.events.set);this.events.get.add;}
$emit{
const set=this.events.get;if{ set.forEach);}
}
$off{
if{ this.events.delete;return，}
const set=this.events.get;if{ set.delete;ifthis.events.delete;}
}
$once{
const wrapper==>{ handler;this.$off，话说回来，}
this.$on;}
}

三、手写 Promise

1️⃣ 思路概览 & 痛点定位

• Pain point: 忘记把 .n 回调放入微任务队列，导致执行顺序与原生 Promise 不一致。
• Pain point: 状态从 PENDING → FULFILLED / REJECTED 的不可逆性未实现，会被多次调用覆盖。
• Pain point: 链式调用返回的新 Promise 没有正确传递 resolve/reject，导致后续 .n 接收不到值。说起来，

2️⃣ 完整实现代码

class MyPromise {
static PENDING = 'pending';按理说，static FULFILLED = 'fulfilled';static REJECTED  = 'rejected';constructor{
this.status  = MyPromise.PENDING;this.value   = undefined;this.reason  = undefined;
this.onFulfilledCallbacks=;// 多次 n 支持
this.onRejectedCallbacks=;老实说，const resolve==>{
ifreturn;/*=== Resolve Procedure===*/
if{
value.n;return，}
this.status=MyPromise.FULFILLED;this.value=value;this.onFulfilledCallbacks.forEach);}，const reject==>{
ifreturn;this.status=MyPromise.REJECTED;this.reason=reason;this.onRejectedCallbacks.forEach);}，try{ executor;}catch{reject;}
}
n{
onFulfilled=typeof onFulfilled==='function'?onFulfilled:v=>v;onRejected=typeof onRejected==='function'?onRejected:r=>{throw r;}，return new MyPromise=>{
const handle==>{
queueMicrotask=>{ // ✅ 微任务保证异步执行顺序一致
try{
const x=cb;按理说，if{ x.n，}
else{ resolve;}
}catch{ reject;}
})，};if{
handle，}else if{
handle;}else{
/* pending – 收集回调 */
this.onFulfilledCallbacks.push=>handle);this.onRejectedCallbacks .push=>handle);}
})，}
catch{ return this.n;}
finally{
return this.n(
v=> MyPromise.resolve).n=>v),r=> MyPromise.resolve).n=>{ throw r;})
)，老实说，}
/* ---------- 静态方法 ---------- */
static resolve{
return val instanceof MyPromise?val : new MyPromise);}
static reject{
return new MyPromise=>rej);}
static all{
return new MyPromise=>{
if)
return reject);const results=;let completed=0;if{ resolve，return;}
iterable.forEach=>{
MyPromise.resolve.n(v=>{
results=v;completed++，if resolve;},reject)，});})，}
static race{
return new MyPromise=>{
if)
return reject);iterable.forEach.n);})，}
static allSettled{
return new MyPromise(resolve=>{
const results=;let completed=0;if{ resolve，return;}
iterable.forEach=>{
MyPromise.resolve.n(
v=>{ results={status:'fulfilled',value:v};},r=>{ results={status:'rejected'。reason:r}，}
).finally=>{
completed++;if resolve，});})，});}
static any{
return new MyPromise=>{
const errors=;怎么说呢，let rejectedCount=0;if
return reject);iterable.forEach=>{
MyPromise.resolve.n(resolve,err=>{
errors=err;rejectedCount++;if
reject)，});})，});}
}
// ------------------- 测试 -------------------
const p=new MyPromise=>setTimeout=>res,1000));p.n，老实说，return 'next';})
.n)
.catch
.finally=>console.log);

四、面试策略 & 主要要点对照表

面试技巧提示：

• Avoid “一次性全套代码”。先说出思路，再逐步展开实现，让面试官看到你的抽象能力。
• If you get stuck on a corner case during现场 coding。请先说明「这里需要考虑循环引用」或「这里需要微任务」，再继续完善代码——思考过程比代码量更关键。
• The moment you can explain *** a === b && a!== c && ，,you’ve demonstrated mastery.