专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

晨光微暖时!2 道 JS 经典面试题拆解，开启惬意学习日

ins518 2025-06-24 14:10:21 技术文章 2 ℃ 0 评论

清晨的阳光透过纱窗，在桌面洒下细碎的光影，泡上一杯温热的花茶，让我们在这宁静美好的时光里，抛开面试的紧张感。就像与老友围炉闲谈般，一起轻松拆解两道 JavaScript 高频面试题，在舒缓氛围中为知识储备添砖加瓦。

第一题：JavaScript 中的事件委托

面试官常问：“请解释什么是事件委托，它的原理是什么，在实际开发中有哪些应用场景？” 别被这个专业术语唬住，事件委托就像 “家长代劳”，孩子（子元素）的事情，交给家长（父元素）统一处理，省时又高效。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件委托示例</title>
</head>
<body>
<ul id="parentList">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<script>
// 获取父元素
const parentList = document.getElementById('parentList');
// 给父元素添加点击事件，实现事件委托
parentList.addEventListener('click', function (event) {
// 判断点击的目标是否是li元素
if (event.target.tagName === 'LI') {
console.log(`点击了${event.target.textContent}`);
}
});
</script>
</body>
</html>

在这段代码中，我们没有给每个<li>单独添加点击事件，而是给它们共同的父元素<ul>添加事件。当点击<li>时，事件会从<li>开始，按照 “事件冒泡” 的机制，向上传递到<ul>，此时在<ul>的点击事件中，通过判断点击的目标（event.target），就能知道具体点击了哪个<li>。在实际开发中，事件委托常用于处理大量动态生成的元素，比如无限滚动加载的列表，能大幅减少内存占用，提升页面性能。

第二题：JavaScript 中的柯里化函数

“请谈谈你对函数柯里化的理解，它在实际开发中有哪些应用？” 柯里化函数就像一个 “任务拆解大师”，把一个需要多个参数的大任务，拆解成多个只需要一个参数的小任务，逐个完成。

// 普通函数，接收两个参数并返回它们的和
function add(a, b) {
return a + b;
}
// 柯里化后的函数
function curriedAdd(a) {
return function (b) {
return a + b;
};
}
// 使用普通函数
console.log(add(2, 3)); // 输出5
// 使用柯里化函数
const add5 = curriedAdd(5);
console.log(add5(3)); // 输出8

在这段代码中，add是一个普通的二元函数，而curriedAdd是经过柯里化改造后的函数。curriedAdd先接收一个参数a，返回一个新函数，这个新函数再接收参数b，最终返回两数之和。柯里化在实际开发中可以用于参数复用，比如某个函数经常需要固定传入某个参数，就可以通过柯里化提前绑定这个参数；还能用于封装一些通用的工具函数，让函数更灵活、更具复用性。

面试应答模板

事件委托问题回答

“事件委托是利用事件冒泡的机制来处理事件的一种方式。简单来说，就是不给每个子元素单独添加事件，而是把事件添加到它们共同的父元素上。当子元素触发事件时，事件会像气泡一样，从子元素往上传递到父元素，在父元素的事件处理函数里，通过判断具体触发事件的目标元素，就能知道是哪个子元素发生了操作。这种方式特别适合处理大量元素的事件，比如一个页面有几百个按钮，如果每个按钮都单独绑定事件，会占用很多内存。用事件委托，只需要给按钮的父容器绑定一个事件就够了，能大大提高代码性能，还方便后续添加或删除子元素，不需要重新绑定事件。”

柯里化函数问题回答

“函数柯里化就是把一个多参数的函数，变成多个单参数的函数。比如一个函数需要两个参数相加，柯里化后，它会先接收第一个参数，返回一个新函数，这个新函数再接收第二个参数，最后得到结果。就像点外卖，本来要一次性选好菜品和地址，柯里化后可以先选菜品，生成一个‘待选地址’的订单，后面再补充地址。在实际开发中，柯里化可以用来复用参数，比如一个计算税费的函数，税率经常是固定的，就可以通过柯里化提前绑定税率参数；还能让函数更灵活，把复杂的功能拆解成小步骤，方便组合和扩展。”

在这悠然的清晨与上午时光里，我们完成了一次知识的惬意之旅。对于这两道面试题，你是否还有独特的见解或疑问？欢迎在评论区留言分享！若觉得文章对你有所帮助，别忘了点赞关注，明天同一时间，我们继续相约，解锁更多有趣的 JavaScript 面试知识！

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表