Front End Interview Handbook JavaScript 高频问答精讲事件委托、this 绑定、原型链与闭包【免费下载链接】front-end-interview-handbookFront End interview preparation materials for busy engineers (updated for 2026)项目地址: https://gitcode.com/GitHub_Trending/fr/front-end-interview-handbook本手册仓库以多语言形式沉淀了一整套前端工程师面试备考资料其中 孟加拉语版 JavaScript 问答文档源文件与 英文主版本 一一对应逐题给出可直接背诵的面试答案与可运行代码示例。本文以该文档为骨架逐题精讲 8 组最高频的 JavaScript 概念题——事件委托、this、原型式继承、模块体系、IIFE、空值与未声明变量、闭包、forEach与map并补充本仓库 JavaScript 编码面试指南 中的考察重点与易错点帮助你读完即可自测、可引用。说明孟加拉语译文仅翻译了英文题库的一部分仓库内另有 中文版 JavaScript 问答 可对照阅读。事件委托Event Delegation事件委托是一种把事件监听器挂在父元素上、而不是逐一挂到每个子孙元素上的技术。由于 DOM 事件会沿节点树向上冒泡bubbling当事件在子孙元素上被触发时监听器同样会被执行。这一技巧的优势是内存占用下降只需在父元素上注册一个处理函数而无需为每个子孙元素分别附加事件处理器handler免去手动解绑/绑定元素被移除时无需从它身上解除 handler新增元素也无需再为其单独绑定事件委托监听天然覆盖动态内容。从浏览器源码行为看事件委托成立的前提正是 DOM 事件的冒泡阶段bubble phase目标元素target上的事件会逐级向上传播到祖先节点直到document根部父级监听器因此在目标触发时被统一回调。这也是很多前端框架内部事件系统的底层思路——仓库中的 React 事件处理章节 即讨论了 React 合成事件与事件委托相关的延伸场景可作扩展阅读。英文主文档中事件委托还被明确列为编码面试重要概念之一DOM 分类下的Event delegation见 javascript/en-US.mdx 的Important concepts表格它与 DOM 遍历、DOM 创建/操作并列为前端领域知识的基础考查点。JavaScript 中this如何工作原文档给出的结论非常直接this没有简单的解释它是 JavaScript 中最令人困惑的概念之一粗略地说this的值取决于函数是如何被调用的。以下是文档总结的判断规则优先级自上而下调用函数时使用了new关键字函数内部的this是一个全新对象使用apply、call或bind来调用/创建函数时this是作为参数传入的那个对象函数作为方法被调用如obj.method()this是该函数作为其属性的对象函数作为自由函数被调用即不满足上述任何条件直接调用this是全局对象——浏览器中是window若处于严格模式use strictthis为undefined而非全局对象当上面多条规则同时适用时更靠上的规则胜出并决定this值若函数是 ES2015 的箭头函数则忽略以上全部规则直接采用其创建时所处作用域的this。这六条规则中第 5 条值得反复体会例如new obj.method()同时命中new 调用与方法调用此时规则 1 优先this仍指向新对象。仓库的 JavaScript 编码面试指南 把thisbinding rulescall/apply/bind列为约需 2 小时掌握的核心主题并把在传给map/forEach的回调里使用this却没意识到它并不指向外部上下文列为典型易错点可见该知识点在实战编码题中同样高频出现。ES6 之后处理this有何变化ES6 引入了[箭头函数]它使用其外围词法作用域作为this不再由调用方式决定。这在多数场景下很便利但副作用是调用方无法再用.call/.apply动态注入上下文——例如像jQuery这类库在给事件处理函数回调绑定this时会失效。因此在重构大型遗留应用时这一差异必须被牢记。面试中的经典延伸是var与setTimeout的闭包陷阱指南文档特别提醒候选人应当能立刻识别出for循环配合var与setTimeout输出3, 3, 3的经典问题这正是this/作用域与闭包交织的考点并解释用let或 IIFE 修复的方式。原型式继承Prototypal Inheritance如何工作这是常见的 JavaScript 面试题。除Object.create(null)创建的对象外所有 JavaScript 对象都有__proto__属性它指向另一个对象——即该对象的原型prototype。当访问对象的某个属性、而该属性不在对象自身上时JavaScript 引擎会去查看对象的__proto__再看__proto__的__proto__依此类推直到在原型链上找到该属性或走到链的末端。这种机制模拟了经典继承但本质上更像是委托delegation而非继承。原型式继承代码示例孟加拉语文档给出了一个非常清晰的Parent/Child示例对应英文主文档的 Prototypal Inheritance 小节function Parent() { this.name Parent; } Parent.prototype.greet function () { console.log(Hello from this.name); }; const child Object.create(Parent.prototype); child.cry function () { console.log(waaaaaahhhh!); }; child.cry(); // waaaaaahhhh! child.greet(); // hello from Parent child.constructor; // ƒ Parent() { // this.name Parent; // } child.constructor.name; // Parent需要特别注意的要点child上并没有定义.greet因此 JS 引擎沿原型链向上查找最终从Parent.prototype处继承到.greet并执行要让子对象继承原型上的方法可通过如下方式之一调用Object.create建立链Object.create(Parent.prototype);Object.create(new Parent(null));Object.create(objLiteral);此时child.constructor仍然指向Parent因为child的原型是Parent.prototype其constructor还是Parent。如果希望修正这一点、让child.constructor正确指向子构造函数文档提供了标准写法在子构造函数内用Parent.call(this)调用父构造函数并把Child.prototype替换为基于Parent.prototype创建的新对象同时显式回填Child.prototype.constructor Childfunction Parent() { this.name Parent; } Parent.prototype.greet function () { console.log(Hello from this.name); }; function Child() { Parent.call(this); this.name Child; } Child.prototype Object.create(Parent.prototype); Child.prototype.constructor Child; const child new Child(); child.greet(); // hello from Child child.constructor.name; // Child补充说明英文主文档website/contents/javascript-questions.md在更新后的版本中改用Animal/Dog示例并明确建议用Object.create手工构建继承链已不再被推荐请改用Object.setPrototypeOf。你可以把Object.create传统教学写法与Object.setPrototypeOf现行推荐写法都掌握面试时两者都能讲清即可。对 AMD 与 CommonJS 的看法AMDAsynchronous Module Definition异步模块定义与 CommonJS 都是 JavaScript 的模块系统实现方案——在 ES2015 之前JavaScript 语言本身并不原生具备模块能力。二者的核心差异CommonJS 是同步的面向服务端开发设计AMD 显然是异步的凭借其对模块异步加载的支持主要面向浏览器场景。个人取舍上AMD 的语法相当啰嗦verbose而 CommonJS 更接近其他语言书写import的风格大多数时候 AMD 并无必要——如果你把所有 JS 打包成一个拼接concatenated的 bundle 文件下发就根本享受不到异步加载带来的好处。同时 CommonJS 语法接近 Node.js 的模块写法在客户端与服务端 JS 开发之间切换时上下文切换开销更小。ES2015 模块同时支持同步与异步加载让人们终于可以统一到单一方案上。尽管当时它在浏览器与 Node 中尚未完全落地但我们始终可以使用转译器transpiler来转换代码。理解这套演进脉络有助于回答模块系统与打包这类引申追问。为什么function foo(){ }();无法作为 IIFE 执行IIFE 全称Immediately Invoked Function Expressions立即调用函数表达式。JavaScript 解析器会把function foo(){ }();读成两部分function foo(){ }与();——前者是一个函数声明function declaration后者一对括号想调用一个函数但没有指定函数名于是抛出Uncaught SyntaxError: Unexpected token )。修复方法有两种核心都是加括号(function foo(){ })()(function foo(){ }())原理以function开头的语句会被视为函数声明把函数体放进()后它便转化为函数表达式function expression从而可以被紧随其后的()立即执行。这类函数不会暴露到全局作用域如果不需要在函数体内引用自身甚至可以省略函数名匿名 IIFE。还可以使用void运算符void function foo(){ }();。但这种方式有一个问题表达式求值结果永远是undefined因此如果你的 IIFE 需要返回值就无法使用了。示例如下const foo void (function bar() { return foo; })(); console.log(foo); // undefined补充这道题与匿名函数的典型用途紧密相关——仓库英文主文档在匿名函数一节指出匿名函数常用于 IIFE 以在局部作用域中封装代码避免变量泄漏到全局见 javascript-questions.md 的 Anonymous functions 小节。另外在 ES6 之后箭头函数、块级作用域与let/const基本取代了大多数 IIFE 的用途但理解 IIFE 的解析规则对阅读老代码仍然必要。null、undefined与 undeclared 变量有何区别如何检测这是三个极易混淆的状态原文档逐一辨析Undeclared未声明当你把一个值赋给一个从未用var、let或const声明过的标识符时就产生了 undeclared 变量。它会被全局定义在当前作用域之外在严格模式strict mode下向 undeclared 变量赋值会抛出ReferenceError。undeclared 变量与全局变量一样有害应尽力避免。要检测它可把其使用包裹在try/catch中function foo() { x 1; // Throws a ReferenceError in strict mode } foo(); console.log(x); // 1undefined指变量已声明但未赋值。若一个函数执行后不返回任何值、而该结果被赋给变量该变量同样为undefined。检测方式是用**严格相等运算符**或typeof返回字符串undefined。注意不要使用抽象相等运算符检测因为当值为null时它也会返回truevar foo; console.log(foo); // undefined console.log(foo undefined); // true console.log(typeof foo undefined); // true console.log(foo null); // true. Wrong, dont use this to check! function bar() {} var baz bar(); console.log(baz); // undefinednull变量被显式赋值为null。它表示无值与undefined的区别在于它经过了明确的赋值。检测方式同样使用严格相等运算符与上面同理不要用值为undefined时也会返回truevar foo null; console.log(foo null); // true console.log(typeof foo object); // true console.log(foo undefined); // true. Wrong, dont use this to check!值得牢记的隐藏坑typeof null object历史遗留的著名 bug而typeof undefined undefined——这也是上例中为何不能靠typeof区分null的原因。文档给出的个人实践建议是绝不留下 undeclared 或 unassigned 的变量暂不使用时在声明后显式赋null若工作流中使用了 linter它通常也能帮你检查是否引用了 undeclared 变量。什么是闭包Closure如何/为何使用它闭包 函数 该函数被声明时所处的词法环境lexical environment。lexical词法意指词法作用域根据变量在源码中的声明位置决定它在哪里可用。闭包能够在外层函数已经返回之后依然访问外层函数的变量即外层作用域链。为什么要用闭包文档给出两大典型动机数据隐私 / 模拟私有方法闭包常用于实现[模块模式module pattern]把状态封装在函数内部、对外只暴露受限接口偏函数应用partial application或柯里化currying借助闭包固定部分参数返回可继续接收剩余参数的新函数。仓库的编码指南把Closures lexical scope列为需要 2–3 小时掌握的 No.1 核心主题见 javascript/en-US.mdx 的 Core topics 表格并提示用var在for循环中配合setTimeout产生3, 3, 3的闭包陷阱是必会识别题。此外在 React 生态中闭包与 Hooks 的依赖捕获密切相关可延伸阅读 React Hooks 章节。面试答题模板建议三步定义函数 词法环境→ 机制外层函数返回后仍可访问其变量→ 用途数据私有化、柯里化/偏应用、事件与回调状态保持。面试中手写防抖debounce或节流throttle本质就是在闭包内保存定时器 ID 与时间戳。.forEach与.map()的主要差异及选型理解二者差异先看各自行为forEach遍历数组元素对每个元素执行一次回调不返回任何值。const a [1, 2, 3]; const doubled a.forEach((num, index) { // Do something with num and/or index. }); // doubled undefinedmap遍历数组元素通过回调把每个元素映射Map为新的元素产生一个新数组返回。const a [1, 2, 3]; const doubled a.map((num) { return num * 2; }); // doubled [2, 4, 6]二者的主要区别是.map()会返回一个新数组。如果你需要基于原数组计算产出、且不希望改动原数组.map()是明确选择如果只是想在数组上做一遍遍历副作用式操作forEach完全够用。深化补充来自本仓库指南英文编码指南强调手写Array.prototype.map的 polyfill 是高频考题且此题远比表面复杂——面试官期待你能指出回调会收到(元素, 索引, 数组)三个参数可选thisArg用于设置回调的thismap会保留稀疏数组的空洞如[1, 2, , 4].map(val val * val) [1, 4, , 16]map开始处理后新增的元素不会被访问。能主动点出这些规范级细节即使不实现是明显的加分信号见 javascript/en-US.mdx 的Examples小节。备考策略如何把概念题转化为面试竞争力概念题Quiz 型问答与编码题在 JavaScript 面试中是两条并行主线。仓库对此给出的建议是详见 JavaScript Coding Interviews把上文主题纳入核心复习清单指南的 Core topics 表明确给出建议投入时长——Closures lexical scope2–3 小时、thisbinding rules2 小时、Event delegation DOM traversal2 小时数组中map/filter/reduce的 polyfill 也约需 2 小时概念问答阶段可以用本仓库的 Quiz 章节quiz/zh-CN.mdx自测因为面试官经常把概念题转化为选择题/口答题编码阶段面试中常让手写防抖/节流、Promise.all、deepClone、事件委托版getElementsByTagName等——写这些题时必然用到闭包与this的绑定规则这正是本文几大主题的实战落点易错自查回调内错误使用this、防抖实现中误用箭头函数导致丢失this、深浅克隆时误用JSON.parse(JSON.stringify(obj))而忽略其对Date/undefined/循环引用的处理等均为高频失分点。准备好后可对照 英文权威版本 与仓库内各 多语言译本 反复演练直到能不看答案、流利地用一两分钟把每题讲完整。【免费下载链接】front-end-interview-handbookFront End interview preparation materials for busy engineers (updated for 2026)项目地址: https://gitcode.com/GitHub_Trending/fr/front-end-interview-handbook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
