1. 项目概述作为一名经历过上百场技术面试的前端工程师我深知JavaScript基础在面试中的重要性。最近整理了一份前端面试高频考点清单发现90%的面试都会围绕12个JS核心知识点展开。这些知识点看似基础但能真正透彻理解的开发者不足30%。这12个核心点涵盖了从内存管理到异步编程的关键领域掌握它们不仅能轻松应对面试更能显著提升日常开发能力。本文将用实战案例拆解每个知识点分享我在大厂面试中总结的考察重点和应答技巧。2. 核心知识点解析2.1 作用域与闭包作用域链决定了变量的可访问性。在Chrome调试器中执行以下代码时function outer() { const x 10; return function inner() { console.log(x); }; } const closureFn outer(); closureFn(); // 输出闭包会保持对外部变量的引用即使外部函数已执行完毕。常见面试陷阱是循环中的闭包问题for (var i 0; i 3; i) { setTimeout(() console.log(i), 100); } // 输出3次3而非预期的0,1,2解决技巧使用let声明或立即执行函数创建新作用域2.2 this指向与绑定规则this的绑定优先级new 显式绑定(call/apply/bind) 隐式绑定(obj.method()) 默认绑定(非严格模式window)const obj { value: 1, getValue: function() { return this.value; } }; const unboundGet obj.getValue; console.log(unboundGet()); // undefined console.log(obj.getValue()); // 1箭头函数的this在定义时确定无法通过call改变。React类组件中常因此出现this丢失问题。2.3 原型与继承每个函数都有prototype属性实例通过__proto__访问原型。实现继承的几种方式// 组合继承 function Parent(name) { this.name name; } Parent.prototype.say function() {}; function Child() { Parent.call(this); } Child.prototype Object.create(Parent.prototype);ES6的class本质仍是原型语法糖。面试常问instanceof原理function myInstanceof(left, right) { let proto left.__proto__; while (proto) { if (proto right.prototype) return true; proto proto.__proto__; } return false; }2.4 事件循环机制JS是单线程语言通过事件循环实现异步。宏任务(macrotask)包括script整体代码setTimeout/setIntervalI/O操作UI渲染微任务(microtask)包括Promise.thenMutationObserverprocess.nextTick(Node)执行顺序示例console.log(script start); setTimeout(() console.log(timeout), 0); Promise.resolve() .then(() console.log(promise1)) .then(() console.log(promise2)); console.log(script end); // 输出顺序script start - script end - promise1 - promise2 - timeout2.5 Promise实现原理手写Promise核心逻辑class MyPromise { constructor(executor) { this.state pending; this.value undefined; this.onFulfilledCallbacks []; const resolve (value) { if (this.state pending) { this.state fulfilled; this.value value; this.onFulfilledCallbacks.forEach(fn fn()); } }; executor(resolve); } then(onFulfilled) { return new MyPromise((resolve) { if (this.state fulfilled) { resolve(onFulfilled(this.value)); } else { this.onFulfilledCallbacks.push(() { resolve(onFulfilled(this.value)); }); } }); } }2.6 类型转换与比较会进行隐式类型转换严格相等。转换规则优先级对象转原始值valueOf() toString()字符串转数字布尔转数字[] ![] // true // 解析![] false 0 // [] 02.7 模块化发展历程从IIFE到ES Modules的演进// IIFE (function(window) { window.module {}; })(window); // CommonJS const fs require(fs); // AMD define([dep], function(dep) {}); // ES Module import React from react;2.8 函数式编程要点高阶函数与纯函数示例// 柯里化 const curry (fn) { return function curried(...args) { if (args.length fn.length) { return fn.apply(this, args); } else { return (...args2) curried.apply(this, args.concat(args2)); } }; }; const sum (a, b, c) a b c; const curriedSum curry(sum); console.log(curriedSum(1)(2)(3)); // 62.9 内存管理与GCV8的垃圾回收机制新生代Scavenge算法老生代标记清除标记整理内存泄漏常见场景未清除的定时器闭包引用DOM引用未释放// 内存泄漏示例 let elements []; function leak() { elements.push(new Array(1000000).join(*)); }2.10 ES6核心特性重点新特性实战// 解构赋值 const { name, ...rest } { name: Jack, age: 20 }; // 可选链 const street user?.address?.street; // 空值合并 const value input ?? default; // 动态导入 const module await import(./module.js);2.11 设计模式应用前端常用设计模式实现// 观察者模式 class EventEmitter { constructor() { this.events {}; } on(type, listener) { this.events[type] this.events[type] || []; this.events[type].push(listener); } emit(type, ...args) { (this.events[type] || []).forEach(listener listener(...args)); } } // 发布订阅 const pubsub new EventEmitter(); pubsub.on(event, data console.log(data)); pubsub.emit(event, { message: hello });2.12 性能优化策略关键优化手段防抖与节流function debounce(fn, delay) { let timer; return function() { clearTimeout(timer); timer setTimeout(() fn.apply(this, arguments), delay); }; }虚拟列表实现Web Worker计算密集型任务合理使用requestAnimationFrame3. 面试应答技巧3.1 问题拆解方法论遇到复杂问题时采用STAR法则Situation问题背景Task需要完成的任务Action采取的行动Result最终结果3.2 白板编程要点先明确输入输出写出测试用例分步骤实现考虑边界条件// 实现深拷贝 function deepClone(obj, map new WeakMap()) { if (obj null || typeof obj ! object) return obj; if (map.has(obj)) return map.get(obj); const clone Array.isArray(obj) ? [] : {}; map.set(obj, clone); for (let key in obj) { if (obj.hasOwnProperty(key)) { clone[key] deepClone(obj[key], map); } } return clone; }3.3 行为问题应答策略回答项目难点时具体技术挑战解决方案对比最终实现效果个人成长收获4. 实战演练题库4.1 高频手写题实现Promise.allPromise.myAll function(promises) { return new Promise((resolve, reject) { let count 0; const result []; promises.forEach((p, i) { Promise.resolve(p) .then(res { result[i] res; if (count promises.length) resolve(result); }) .catch(reject); }); }); };函数柯里化数组扁平化发布订阅模式4.2 原理类问题V8执行JS代码的流程浏览器渲染原理HTTPS握手过程Webpack打包机制4.3 场景设计题实现无限滚动列表前端监控系统设计组件库按需加载方案微前端架构实现5. 持续学习建议建立个人知识体系的方法定期整理脑图参与开源项目技术博客输出模拟面试训练推荐学习路径基础《JavaScript高级程序设计》进阶《你不知道的JavaScript》算法《剑指Offer》工程化《Webpack实战》