晨光透过纱帘，在桌面上洒下斑驳光影，泡一杯清香四溢的茶，让我们伴着这份宁静，一同拆解两道 JavaScript 高频面试题。没有紧张的节奏，就像在晨跑时随意欣赏路边风景，在舒缓中悄然充实自己的知识储备，为面试增添底气。

第一题：JavaScript 中的事件冒泡与捕获

面试官常常会问：“请解释一下 JavaScript 中的事件冒泡和事件捕获是什么，它们有什么区别，在实际开发中有哪些应用场景？” 别被这些术语吓住，把它们想象成一场 “消息传递游戏” 就好理解了。事件冒泡是消息从 “孩子” 传给 “家长”，再层层往上；事件捕获则是消息从 “爷爷” 传给 “爸爸”，最后到 “孩子”，传递方向不同，但都能让我们精准控制事件的响应。

// HTML结构，三个嵌套的div
<div id="parent">
<div id="child">
<div id="grandChild"></div>
</div>
</div>
// JavaScript代码
// 获取元素
const parent = document.getElementById('parent');
const child = document.getElementById('child');
const grandChild = document.getElementById('grandChild');
// 事件冒泡示例
grandChild.addEventListener('click', function() {
console.log('grandChild被点击，先触发自身事件'); // 首先输出
}, false); // 使用默认的冒泡阶段
child.addEventListener('click', function() {
console.log('child被点击，冒泡上来触发事件'); // 接着输出
}, false);
parent.addEventListener('click', function() {
console.log('parent被点击，冒泡到顶层触发事件'); // 最后输出
}, false);
// 事件捕获示例
grandChild.addEventListener('click', function() {
console.log('grandChild在捕获阶段被点击');
}, true); // 设置为捕获阶段
child.addEventListener('click', function() {
console.log('child在捕获阶段被点击');
}, true);
parent.addEventListener('click', function() {
console.log('parent在捕获阶段被点击');
}, true);

在实际开发中，事件冒泡可以用于事件委托，比如在列表项很多时，给列表父元素添加点击事件，就能处理所有列表项的点击，减少内存占用；事件捕获则适合在需要先对事件进行全局处理的场景，比如在页面最外层捕获滚动事件，提前做一些判断和准备工作。

第二题：JavaScript 中的深拷贝与浅拷贝

“请说一说 JavaScript 中深拷贝和浅拷贝的区别，如何实现深拷贝？” 这就好比复制一幅画，浅拷贝只是复制了画的框架和表面色彩，深拷贝则是连画布的纹理、颜料的层次都一模一样地复刻。

浅拷贝示例

// 简单数组浅拷贝
const arr1 = [1, 2, 3];
const arr2 = arr1.slice(); // 使用slice方法进行浅拷贝
arr2[0] = 10;
console.log(arr1); // 输出 [1, 2, 3]
console.log(arr2); // 输出 [10, 2, 3]
// 对象浅拷贝
const obj1 = { a: { b: 1 } };
const obj2 = {...obj1 }; // 使用展开运算符进行浅拷贝
obj2.a.b = 2;
console.log(obj1.a.b); // 输出 2，因为浅拷贝只复制了一层，嵌套对象是共享的
console.log(obj2.a.b); // 输出 2

深拷贝实现方法（利用 JSON.parse 和 JSON.stringify，有局限性）

const obj3 = { a: { b: 1 }, c: [1, 2, 3] };
const obj4 = JSON.parse(JSON.stringify(obj3)); // 通过JSON转换实现深拷贝
obj4.a.b = 2;
obj4.c[0] = 10;
console.log(obj3.a.b); // 输出 1，深拷贝后修改不会影响原对象
console.log(obj3.c[0]); // 输出 1
console.log(obj4.a.b); // 输出 2
console.log(obj4.c[0]); // 输出 10

更完善的深拷贝函数（递归实现）

function deepCopy(obj) {
if (typeof obj!== 'object' || obj === null) {
return obj; // 如果是基本数据类型或null，直接返回
}
let result;
if (Array.isArray(obj)) {
result = [];
for (let item of obj) {
result.push(deepCopy(item)); // 递归处理数组元素
}
} else {
result = {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
result[key] = deepCopy(obj[key]); // 递归处理对象属性
}
}
}
return result;
}
const complexObj1 = { a: { b: 1 }, c: [1, { d: 2 }] };
const complexObj2 = deepCopy(complexObj1);
complexObj2.a.b = 2;
complexObj2.c[1].d = 3;
console.log(complexObj1.a.b); // 输出 1
console.log(complexObj1.c[1].d); // 输出 2
console.log(complexObj2.a.b); // 输出 2
console.log(complexObj2.c[1].d); // 输出 3

面试应答模板

事件冒泡与捕获问题回答

“事件冒泡和捕获是 JavaScript 处理事件的两种机制。事件冒泡就像家里孩子闯祸了，先告诉爸爸妈妈，爸爸妈妈再告诉爷爷奶奶，消息从最内层的元素，一层一层往外层传递。事件捕获反过来，是爷爷奶奶先知道，再告诉爸爸妈妈，最后到孩子。默认情况下，事件是冒泡阶段触发。在实际开发里，事件冒泡很适合做事件委托，比如一个页面有很多按钮，不用给每个按钮单独写点击事件，给它们共同的父元素写一个就行，这样能节省内存；事件捕获适合在一开始就对事件做全局处理，比如在页面最外层捕获滚动事件，先判断用户是不是在做特殊操作，再决定要不要继续处理。”

深拷贝与浅拷贝问题回答

“浅拷贝和深拷贝主要区别在于复制对象时，对嵌套对象的处理方式。浅拷贝只复制一层，对于嵌套的对象或数组，复制的只是引用，修改新对象里的嵌套内容，原对象也会跟着变，就像两个人共用一个笔记本，一个人改了内容，另一个人看到的也变了。深拷贝是把对象里所有东西都复制一份，新对象和原对象完全独立，改新的不会影响旧的。实现深拷贝简单的方法可以用 JSON.parse 和 JSON.stringify 转换，但这种方式有局限，像函数、undefined、Symbol 这些类型就处理不了。更完善的办法是写一个递归函数，遇到对象或数组就继续往下复制，直到把所有内容都复制完，这样就能得到一个和原对象完全一样，但又互不影响的新对象了。”

在这悠然的晨间时光里，我们一同完成了知识的漫步。对于这两道题，你是否还有不一样的见解？或者希望下期讲解哪些知识点？欢迎在评论区畅所欲言。觉得文章对你有帮助，别忘了点赞、关注，明天清晨，我们继续相约，探索更多前端面试奥秘！