〓 面试前的准备与认知
在当前的前端招聘市场中，java script面试题往往是决定求职者能否拿到Offer的关键环节。许多开发者虽然在日常工作中能够熟练运用React或Vue等框架，但在面对底层语言机制的追问时却显得捉襟见肘。本页面旨在通过系统化的梳理，帮助开发者构建完整的知识体系。
面试不仅仅是知识的检索，更是逻辑思维与问题解决能力的体现。面试官通常通过考察你对JavaScript核心概念的理解，来判断你的技术深度和潜力。例如，为什么需要理解原型链？因为它是JS实现对象继承的基石；为什么必须掌握异步编程？因为现代Web应用绝大多数时间都在等待网络请求或用户交互。
① 基础知识占比
约30%的题目涉及变量类型、作用域、闭包等基础概念。这些是构建复杂应用的砖石，必须牢固掌握。
② 原理与机制占比
约40%的题目考察事件循环、原型链、执行上下文等底层机制。这是区分初级与高级开发者的分水岭。
③ 工程与框架占比
约30%的题目涉及ES6+新特性、性能优化、框架原理及工程化实践。这反映了实际工作中的技术栈要求。
⚡ 基础核心：类型、作用域与闭包
1. JavaScript 数据类型与检测
在回答java script面试题时，数据类型是绕不开的话题。JS分为基本数据类型（Number, String, Boolean, Undefined, Null, Symbol, BigInt）和引用数据类型（Object, Array, Function）。
| 检测方法 | 适用类型 | 局限性 | 示例 |
|---|---|---|---|
| typeof | 基本类型、函数 | 无法区分Object和Array，null返回object | typeof [] // "object" |
| instanceof | 引用类型 | 只能检测原型链，跨iframe时失效 | [] instanceof Array // true |
| Object.prototype.toString.call | 所有类型 | 写法较复杂，但最准确 | toString.call(null) // "[object Null]" |
| Array.isArray | 数组 | ES5引入，专门用于判断数组 | Array.isArray([]) // true |
2. 深入理解闭包（Closure）
闭包是java script面试题中的常客，也是JS最强大的特性之一。简单来说，闭包是指有权访问另一个函数作用域中变量的函数。
function outer() {
let count = 0;
return function inner() {
count++;
console.log(count);
};
}
const counter = outer();
counter(); // 1
counter(); // 2
在上述代码中，inner函数就是一个闭包，它保留了对外部变量count的引用。闭包的常见应用场景包括：数据私有化、函数柯里化、防抖与节流等。但在面试中，面试官可能会追问闭包带来的内存泄漏问题，以及如何正确释放闭包占用的内存。
3. 作用域与作用域链
JS的作用域分为全局作用域、函数作用域和块级作用域（ES6引入let和const）。作用域链是当代码在一个环境中执行时，会创建变量对象的一个作用域链，用于保证对执行环境有权访问的变量和函数的有序访问。
⚙️ 进阶原理：原型链与面向对象
原型链详解
每个JavaScript对象都有一个内置的[[Prototype]]属性（通常通过__proto__访问），它指向该对象的原型。当访问一个对象的属性时，如果该对象自身不存在该属性，则会沿着原型链向上查找，直到找到该属性或到达原型链的尽头（null）。
- Function.prototype: 所有函数的原型，指向Function.prototype。
- Object.prototype: 所有对象的最终原型，指向Object.prototype。
- constructor: 原型对象上的constructor属性指向构造函数。
理解原型链对于实现自定义继承和调试对象属性至关重要。在面试中，常要求手写一个instanceof的实现，其本质就是检查原型链。
this 指向的四种规则
this的指向在函数被调用时确定，主要遵循以下规则：
- 默认绑定: 独立函数调用，指向全局对象（严格模式下为undefined）。
- 隐式绑定: 作为对象方法调用，指向该对象。
- 显式绑定: 使用
call,apply,bind强制指定指向。 - new 绑定: 使用
new关键字调用构造函数，指向新创建的对象。
箭头函数没有自己的this，它捕获其定义时所在上下文的this值，这是解决传统回调函数中this丢失问题的利器。
常见的继承模式
- 原型链继承: 让子类型的原型指向父类型的实例。缺点是引用类型属性会被所有实例共享。
- 构造函数继承: 在子类型构造函数内部调用父类型构造函数。优点是解决了引用共享问题，缺点是无法复用父类型原型上的方法。
- 组合继承: 结合原型链和构造函数的优点，使用原型链实现对原型属性和方法的继承，使用构造函数实现对实例属性的继承。这是最常用的模式。
- 寄生组合式继承: 组合继承的优化版，通过借用构造函数继承属性，通过混入原型对象继承方法，只调用一次父类构造函数，性能更优。
🚀 异步编程：事件循环与Promise
异步处理是java script面试题中的难点，也是前端开发的核心能力。JS是单线程语言，通过事件循环（Event Loop）机制实现异步。
事件循环（Event Loop）机制
理解事件循环需要区分宏任务（Macrotask）和微任务（Microtask）：
- 宏任务: setTimeout, setInterval, I/O, UI rendering等。
- 微任务: Promise.then, MutationObserver, process.nextTick等。
console.log('1');
setTimeout(function() {
console.log('2');
}, 0);
Promise.resolve().then(function() {
console.log('3');
});
console.log('4');
// 输出顺序: 1 -> 4 -> 3 -> 2
// 解析: 同步代码先执行(1, 4)，然后执行微任务(3)，最后执行宏任务(2)
Promise 与 async/await
Promise解决了回调地狱问题，提供了链式调用的方式。而async/await是Promise的语法糖，使得异步代码看起来像同步代码，提高了可读性。
在面试中，常要求手写一个Promise实现，或者实现一个并发控制函数，限制同时运行的异步请求数量。
🌐 浏览器机制与性能优化
除了语言本身，浏览器的工作原理也是java script面试题的重要组成部分。
浏览器解析HTML标签，生成DOM树。如果解析过程中遇到CSS或JS文件，会暂停解析，先下载并执行。
浏览器解析CSS，生成CSSOM树。CSS会阻塞DOM的构建，因此建议将CSS放在头部。
将DOM树和CSSOM树结合，生成渲染树。不可见元素（如display: none）不会被包含在渲染树中。
计算每个节点在屏幕上的位置和大小（重排Reflow），然后将像素绘制到屏幕上（重绘Repaint）。
性能优化策略
减少重排和重绘是性能优化的关键。具体措施包括：
- 使用
classList代替直接修改style。 - 批量修改DOM，使用
DocumentFragment或先display: none再修改。 - 避免频繁读取布局属性（如
offsetTop,clientHeight），如果需要，先缓存起来。 - 使用
requestAnimationFrame进行动画，确保在浏览器重绘前执行。
❓ 高频面试题 Q&A
Q1: 请解释一下 JavaScript 中的防抖（Debounce）和节流（Throttle）。
A: 两者都是为了限制函数的频繁执行。
- 防抖: 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。适用于搜索框输入、窗口resize等场景。
- 节流: 规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。适用于滚动加载、按钮点击等场景。
Q2: 什么是跨域？如何解决跨域问题？
A: 跨域是指浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。浏览器基于同源策略的限制。
解决方案包括：
- CORS: 后端设置Access-Control-Allow-Origin头。
- JSONP: 利用script标签不受同源策略限制的特性（仅支持GET）。
- 代理: 通过Nginx反向代理或开发服务器代理，将跨域请求转化为同源请求。
Q3: 请描述一下 JavaScript 垃圾回收机制。
A: JS主要采用标记清除（Mark-and-Sweep）算法。当变量进入环境时，标记为“进入环境”，离开环境时标记为“离开环境”。垃圾回收器在运行时会给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中的变量引用的变量的标记。此后被标记的变量即为准备删除的变量。另一种方式是引用计数，但由于循环引用问题，现代浏览器较少使用。