1. 京东前端面试JS核心考点深度解析作为国内电商巨头京东的前端技术团队对候选人的要求向来以严格著称。去年我参加京东前端面试时面试官对JavaScript基础的考察深度让我印象深刻。今天我就来分享三道京东高频面试题这些题目看似基础却能准确考察出候选人对JS核心机制的掌握程度。2. 变量作用域与提升从现象看本质2.1 经典变量提升题目解析先来看这道京东一面必问题console.log(a); var a 10; function fn() { console.log(a); var a 20; } fn(); console.log(a);输出结果是undefined undefined 102.2 执行上下文深度剖析这个结果涉及JS引擎的两个关键阶段编译阶段变量提升所有var声明会被提升到作用域顶部初始值为undefined函数提升函数声明整体提升包括函数体执行阶段按顺序执行代码遇到赋值语句才会真正赋值函数调用时会创建新的执行上下文具体执行流程全局上下文创建阶段变量a提升值为undefined函数fn整体提升执行console.log(a)此时a是undefined执行a10赋值调用fn()创建函数执行上下文函数内a提升值为undefined执行console.log(a)输出undefined执行a20赋值不影响全局a最后输出全局a的值102.3 常见面试追问与扩展京东面试官通常会追问如果去掉fn内的var会怎样a会变成全局变量输出变为10,10,20使用let/const会怎样会报错因为let/const存在暂时性死区函数表达式会提升吗不会只有函数声明会整体提升关键点理解执行上下文的创建和执行过程以及不同声明方式的差异3. 原型继承从实现到优化3.1 原型继承经典实现京东二面常考的原型继承题function Person(name) { this.name name; } Person.prototype.sayName function() { console.log(My name is ${this.name}); }; // 实现Student继承Person function Student(name, score) { Person.call(this, name); // 关键点1构造函数继承 this.score score; } Student.prototype Object.create(Person.prototype); // 关键点2原型继承 Student.prototype.constructor Student; // 关键点3修复constructor Student.prototype.sayScore function() { console.log(My score is ${this.score}); };3.2 关键步骤解析构造函数继承通过Person.call(this)调用父类构造函数确保子类实例拥有父类的实例属性原型链继承使用Object.create创建中间对象避免直接赋值导致的原型污染constructor修复保证instanceof和constructor判断正确维护原型链的完整性3.3 面试常见追问为什么不用Student.prototype new Person()会执行不必要的Person构造函数可能带来副作用ES6的class实现class Student extends Person { constructor(name, score) { super(name); this.score score; } sayScore() { console.log(My score is ${this.score}); } }Object.create与new的区别Object.create只设置原型链new会执行构造函数4. 异步编程事件循环深度解析4.1 经典事件循环题目京东面试必考的异步题console.log(start); setTimeout(() { console.log(setTimeout1); Promise.resolve().then(() { console.log(promise1); }); }, 0); Promise.resolve().then(() { console.log(promise2); setTimeout(() { console.log(setTimeout2); }, 0); }); console.log(end);输出顺序start end promise2 setTimeout1 promise1 setTimeout24.2 事件循环执行流程第一轮循环执行同步代码输出start、end微任务队列[promise2回调]宏任务队列[setTimeout1]执行微任务输出promise2将setTimeout2加入宏任务队列宏任务队列[setTimeout1, setTimeout2]第二轮循环执行setTimeout1输出setTimeout1将promise1加入微任务队列执行微任务输出promise1第三轮循环执行setTimeout2输出setTimeout24.3 关键规则总结执行顺序同步代码 → 微任务 → 宏任务重要原则每个宏任务执行完后都要清空微任务队列微任务优先级高于宏任务常见微任务Promise.then/catch/finallyasync/awaitqueueMicrotask常见宏任务setTimeout/setIntervalI/O操作UI渲染5. 面试准备建议基础要扎实理解JS运行机制比死记硬背更重要能画出原型链图、事件循环流程图多思考为什么每个特性背后的设计初衷不同方案的优缺点比较动手实践自己实现一遍继承方案修改题目参数观察不同结果关注ES6特性class、箭头函数等新特性的底层实现与传统方式的区别我在准备京东面试时会把每个知识点都拆解到最底层比如为什么要有变量提升原型继承的设计哲学是什么事件循环机制解决了什么问题这种深度思考让我在面试中能够应对各种追问最终成功拿到了offer。建议大家在准备时不要停留在表面要深入理解每个特性背后的设计思想和应用场景。