前言如果你面过字节、抖音、飞书、TikTok 相关前端岗就一定知道字节的前端面试极其硬核、极其重基础、极其爱抠原理。不像很多中小厂只问框架怎么用字节最喜欢问“为什么”、“底层怎么做”、“你能手写吗”。整个字节前端面试最核心、最稳定、最高频的永远是这三块JavaScript 执行机制闭包 作用域原型 继承异步 事件循环这篇作为字节系列第一篇我直接拿字节真实一面高频原题用最通俗、最形象、最好记的方式讲透让你看完就能直接去面试。真题 1经典事件循环输出题字节几乎必问面试原题jsconsole.log(start) setTimeout(() { console.log(setTimeout) }, 0) Promise.resolve().then(() { console.log(promise1) }).then(() { console.log(promise2) }) console.log(end)请说出输出顺序并完整解释原因。核心考察点宏任务、微任务区分事件循环执行顺序Promise 链式调用通俗易懂解析我用一句话先给你总结事件循环铁律先同步后微任务再宏任务微任务不清空绝对不执行宏任务。一步步看先执行所有同步代码输出start遇到 setTimeout扔到宏任务队列遇到 Promise.then扔到微任务队列输出end同步执行完现在输出plaintextstart end开始清空所有微任务先执行第一个 then → 输出promise1它又返回一个新 Promise第二个 then 继续进微任务继续清空 → 输出promise2微任务全空了才去执行宏任务执行 setTimeout → 输出setTimeout最终结果plaintextstart end promise1 promise2 setTimeout字节高频追问为什么 setTimeout 明明写 0ms却最后执行有哪些微任务、哪些宏任务async/await 本质是什么执行顺序真题 2闭包 变量提升 作用域字节超高频面试原题jsfor (var i 0; i 5; i) { setTimeout(() { console.log(i) }, 0) }问输出什么为什么怎么改成输出 0 1 2 3 4解析超通俗因为var没有块级作用域只有函数作用域循环一瞬间跑完i 已经变成 5五个定时器全部引用同一个 i所以输出plaintext5 5 5 5 5怎么改三种标准答案面试随便说使用let最简单、最推荐jsfor (let i 0; i 5; i) { setTimeout(() { console.log(i) }, 0) }let 会在每一轮循环创建独立块作用域保存当前 i。使用立即执行函数闭包jsfor (var i 0; i 5; i) { (function(j) { setTimeout(() { console.log(j) }, 0) })(i) }使用 setTimeout 第三个参数jsfor (var i 0; i 5; i) { setTimeout((j) { console.log(j) }, 0, i) }字节面试官到底在考你什么你是否真正理解作用域你是否理解闭包的本质保存作用域你是否理解 var/let 差异真题 3原型链 instanceof 原理字节必问面试原题jsfunction Person() {} function Student() {} Student.prototype new Person() let s new Student() console.log(s instanceof Student) console.log(s instanceof Person) console.log(s instanceof Object)输出与解析plaintexttrue true true一句话讲清instanceof顺着proto一直往上找能不能找到对应 prototype。字节最爱让你手写instanceOfjsfunction myInstanceof(left, right) { let proto left.__proto__ let prototype right.prototype while (proto) { if (proto prototype) return true proto proto.__proto__ } return false }能手写出来直接加分。真题 4this 指向问题字节一面常客面试原题jsconst obj { name: 字节, fn: function() { console.log(this.name) } } const f obj.fn f() obj.fn()解析最简单记忆法this 记住三句话谁调用指向谁单独执行 → 指向 window /undefined严格模式箭头函数没有自己 this沿用外层结果plaintextundefined // f() 是单独执行 字节 // obj.fn() → obj 调用字节追问call、apply、bind 区别能手写 bind 吗这是下一篇重点本篇先给结论本篇总结面试直接背字节一面 JS 核心就考这 4 大类事件循环同步 → 微任务 → 宏任务闭包 / 作用域var/let 区别、保存作用域、循环定时器问题原型链proto、prototype、instanceof 原理this 指向谁调用指向谁单独执行指向 window这 4 类题字节几乎每场面试都会出现至少两道。你把本篇完全吃透字节一面 JS 基础关基本稳过。
字节前端面试真题解析系列（第一篇）：JS 核心三大拦路虎 —— 闭包、原型、事件循环，吃透直接过一面
前言如果你面过字节、抖音、飞书、TikTok 相关前端岗就一定知道字节的前端面试极其硬核、极其重基础、极其爱抠原理。不像很多中小厂只问框架怎么用字节最喜欢问“为什么”、“底层怎么做”、“你能手写吗”。整个字节前端面试最核心、最稳定、最高频的永远是这三块JavaScript 执行机制闭包 作用域原型 继承异步 事件循环这篇作为字节系列第一篇我直接拿字节真实一面高频原题用最通俗、最形象、最好记的方式讲透让你看完就能直接去面试。真题 1经典事件循环输出题字节几乎必问面试原题jsconsole.log(start) setTimeout(() { console.log(setTimeout) }, 0) Promise.resolve().then(() { console.log(promise1) }).then(() { console.log(promise2) }) console.log(end)请说出输出顺序并完整解释原因。核心考察点宏任务、微任务区分事件循环执行顺序Promise 链式调用通俗易懂解析我用一句话先给你总结事件循环铁律先同步后微任务再宏任务微任务不清空绝对不执行宏任务。一步步看先执行所有同步代码输出start遇到 setTimeout扔到宏任务队列遇到 Promise.then扔到微任务队列输出end同步执行完现在输出plaintextstart end开始清空所有微任务先执行第一个 then → 输出promise1它又返回一个新 Promise第二个 then 继续进微任务继续清空 → 输出promise2微任务全空了才去执行宏任务执行 setTimeout → 输出setTimeout最终结果plaintextstart end promise1 promise2 setTimeout字节高频追问为什么 setTimeout 明明写 0ms却最后执行有哪些微任务、哪些宏任务async/await 本质是什么执行顺序真题 2闭包 变量提升 作用域字节超高频面试原题jsfor (var i 0; i 5; i) { setTimeout(() { console.log(i) }, 0) }问输出什么为什么怎么改成输出 0 1 2 3 4解析超通俗因为var没有块级作用域只有函数作用域循环一瞬间跑完i 已经变成 5五个定时器全部引用同一个 i所以输出plaintext5 5 5 5 5怎么改三种标准答案面试随便说使用let最简单、最推荐jsfor (let i 0; i 5; i) { setTimeout(() { console.log(i) }, 0) }let 会在每一轮循环创建独立块作用域保存当前 i。使用立即执行函数闭包jsfor (var i 0; i 5; i) { (function(j) { setTimeout(() { console.log(j) }, 0) })(i) }使用 setTimeout 第三个参数jsfor (var i 0; i 5; i) { setTimeout((j) { console.log(j) }, 0, i) }字节面试官到底在考你什么你是否真正理解作用域你是否理解闭包的本质保存作用域你是否理解 var/let 差异真题 3原型链 instanceof 原理字节必问面试原题jsfunction Person() {} function Student() {} Student.prototype new Person() let s new Student() console.log(s instanceof Student) console.log(s instanceof Person) console.log(s instanceof Object)输出与解析plaintexttrue true true一句话讲清instanceof顺着proto一直往上找能不能找到对应 prototype。字节最爱让你手写instanceOfjsfunction myInstanceof(left, right) { let proto left.__proto__ let prototype right.prototype while (proto) { if (proto prototype) return true proto proto.__proto__ } return false }能手写出来直接加分。真题 4this 指向问题字节一面常客面试原题jsconst obj { name: 字节, fn: function() { console.log(this.name) } } const f obj.fn f() obj.fn()解析最简单记忆法this 记住三句话谁调用指向谁单独执行 → 指向 window /undefined严格模式箭头函数没有自己 this沿用外层结果plaintextundefined // f() 是单独执行 字节 // obj.fn() → obj 调用字节追问call、apply、bind 区别能手写 bind 吗这是下一篇重点本篇先给结论本篇总结面试直接背字节一面 JS 核心就考这 4 大类事件循环同步 → 微任务 → 宏任务闭包 / 作用域var/let 区别、保存作用域、循环定时器问题原型链proto、prototype、instanceof 原理this 指向谁调用指向谁单独执行指向 window这 4 类题字节几乎每场面试都会出现至少两道。你把本篇完全吃透字节一面 JS 基础关基本稳过。
