2025年高頻js面試題及答案如何理解JavaScript中的原型鏈？原型鏈?zhǔn)荍avaScript實(shí)現(xiàn)繼承的核心機(jī)制。每個(gè)對(duì)象（除null外）都有一個(gè)`[[Prototype]]`內(nèi)部屬性，指向其原型對(duì)象。當(dāng)訪問(wèn)對(duì)象的屬性或方法時(shí)，若對(duì)象自身不存在該屬性，JS引擎會(huì)沿著`[[Prototype]]`鏈向上查找，直到找到屬性或到達(dá)原型鏈頂端（`Ototype`的原型為null）。例如，`constobj={}`的原型是`Ototype`，`[]`的原型是`Atotype`，而`Atotype`的原型是`Ototype`。原型鏈的終點(diǎn)是`null`，這避免了無(wú)限循環(huán)。理解原型鏈需注意：構(gòu)造函數(shù)的`prototype`屬性指向?qū)嵗脑蛯?duì)象；`__proto__`是對(duì)象的原型訪問(wèn)器（非標(biāo)準(zhǔn)但常用）；`Object.getPrototypeOf()`是標(biāo)準(zhǔn)獲取原型的方法。ES6引入的類語(yǔ)法與傳統(tǒng)構(gòu)造函數(shù)的區(qū)別是什么？ES6類是構(gòu)造函數(shù)的語(yǔ)法糖，但提供了更清晰的面向?qū)ο蠼Y(jié)構(gòu)。主要區(qū)別：1.類聲明不會(huì)變量提升（函數(shù)聲明會(huì)）；2.類的所有方法（包括構(gòu)造函數(shù)）默認(rèn)不可枚舉（`enumerable:false`）；3.類內(nèi)部定義的方法在嚴(yán)格模式下執(zhí)行；4.類的構(gòu)造函數(shù)中若未顯式返回對(duì)象，默認(rèn)返回實(shí)例（傳統(tǒng)構(gòu)造函數(shù)若返回非對(duì)象會(huì)被忽略，返回對(duì)象則覆蓋實(shí)例）；5.類支持`static`靜態(tài)方法（直接掛載在類上）和`private`私有字段（通過(guò)``前綴聲明，僅類內(nèi)部訪問(wèn)）。例如：```javascriptclassPerson{age;//私有字段constructor(name,age){=name;this.age=age;}staticcreate(name){//靜態(tài)方法returnnewPerson(name,18);}getName(){return;}}```如何實(shí)現(xiàn)一個(gè)完整的深拷貝？深拷貝需遞歸復(fù)制對(duì)象所有層級(jí)的屬性，同時(shí)處理特殊對(duì)象（如Date、RegExp、Map、Set、函數(shù)等）和循環(huán)引用。步驟：1.處理原始值（number、string、boolean、null、undefined、symbol）和函數(shù)（通常不復(fù)制，或根據(jù)需求處理）；2.處理特殊對(duì)象類型（如Date創(chuàng)建新實(shí)例，RegExp復(fù)制源的模式和標(biāo)志）；3.處理循環(huán)引用（使用WeakMap記錄已復(fù)制對(duì)象，避免遞歸棧溢出）；4.遞歸復(fù)制普通對(duì)象和數(shù)組的屬性。示例實(shí)現(xiàn)：```javascriptfunctiondeepClone(obj,hash=newWeakMap()){if(obj===null||typeofobj!=='object')returnobj;if(objinstanceofDate)returnnewDate(obj);if(objinstanceofRegExp)returnnewRegExp(obj);if(hash.has(obj))returnhash.get(obj);//處理循環(huán)引用constclone=Array.isArray(obj)?[]:{};hash.set(obj,clone);//記錄已復(fù)制對(duì)象for(constkeyinobj){if(obj.hasOwnProperty(key)){clone[key]=deepClone(obj[key],hash);}}returnclone;}```簡(jiǎn)述JavaScript事件循環(huán)（EventLoop）的執(zhí)行機(jī)制。事件循環(huán)是JS處理異步任務(wù)的核心機(jī)制，負(fù)責(zé)協(xié)調(diào)執(zhí)行棧、微任務(wù)隊(duì)列和宏任務(wù)隊(duì)列。執(zhí)行流程：1.執(zhí)行同步代碼，將同步任務(wù)依次壓入執(zhí)行棧，執(zhí)行完畢后彈出；2.執(zhí)行棧為空時(shí)，檢查微任務(wù)隊(duì)列（MicrotaskQueue），按順序執(zhí)行所有微任務(wù)（如Promise.then、MutationObserver回調(diào)）；3.微任務(wù)執(zhí)行完畢后，進(jìn)行一次“渲染”（瀏覽器可能更新UI）；4.從宏任務(wù)隊(duì)列（MacrotaskQueue）中取出一個(gè)任務(wù)執(zhí)行（如setTimeout、setInterval、I/O操作、UI事件）；5.重復(fù)步驟2-4，形成循環(huán)。需注意：Node.js的事件循環(huán)階段（timers、I/Ocallbacks、idle/prepare、poll、check、closecallbacks）與瀏覽器略有不同，且`process.nextTick`回調(diào)會(huì)在當(dāng)前階段結(jié)束前執(zhí)行（優(yōu)先級(jí)高于微任務(wù)）。如何優(yōu)化JavaScript的異步性能？?jī)?yōu)化異步性能需減少阻塞，合理管理任務(wù)優(yōu)先級(jí)。方法包括：1.避免嵌套過(guò)深的回調(diào)（使用async/await或Promise鏈扁平化代碼）；2.合并多次微任務(wù)（如批量處理DOM更新，利用`Promise.all`并行執(zhí)行多個(gè)不依賴的異步操作）；3.控制宏任務(wù)的執(zhí)行頻率（對(duì)滾動(dòng)/resize事件使用防抖或節(jié)流，如`setTimeout`最小延遲（瀏覽器通常為4ms））；4.使用WebWorkers處理計(jì)算密集型任務(wù)（避免阻塞主線程）；5.預(yù)加載關(guān)鍵資源（通過(guò)`link[rel="preload"]`），減少I/O等待時(shí)間；6.合理使用`requestIdleCallback`執(zhí)行低優(yōu)先級(jí)任務(wù)（在瀏覽器空閑時(shí)處理）。Vue3響應(yīng)式系統(tǒng)與Vue2的區(qū)別是什么？Vue3用Proxy替代Vue2的Object.defineProperty實(shí)現(xiàn)響應(yīng)式，核心改進(jìn)：1.支持更全面的數(shù)據(jù)類型：Proxy可監(jiān)聽對(duì)象的新增/刪除屬性、數(shù)組索引和長(zhǎng)度變化（Object.defineProperty需額外處理數(shù)組方法，且無(wú)法檢測(cè)屬性刪除）；2.更細(xì)粒度的依賴收集：Vue3的`effect`函數(shù)通過(guò)Track和Trigger實(shí)現(xiàn)依賴跟蹤，每個(gè)屬性對(duì)應(yīng)獨(dú)立的依賴集合（Vue2的Dep對(duì)象為每個(gè)屬性收集Watcher，可能因嵌套對(duì)象導(dǎo)致依賴冗余）；3.組合式API的支持：響應(yīng)式數(shù)據(jù)（ref/reactive）與邏輯復(fù)用（Composables）解耦，避免Vue2選項(xiàng)式API的“邏輯分散”問(wèn)題；4.性能優(yōu)化：Proxy的懶代理機(jī)制（僅訪問(wèn)屬性時(shí)才創(chuàng)建代理）減少初始化開銷，Vue3的編譯優(yōu)化（如`PatchFlag`標(biāo)記動(dòng)態(tài)節(jié)點(diǎn)）減少運(yùn)行時(shí)Diff計(jì)算量。ReactFiber架構(gòu)的核心改進(jìn)是什么？Fiber架構(gòu)是React16+的渲染協(xié)調(diào)器，核心目標(biāo)是實(shí)現(xiàn)“可中斷的渲染”，提升復(fù)雜應(yīng)用的響應(yīng)速度。改進(jìn)包括：1.任務(wù)分片（TaskScheduling）：將渲染任務(wù)拆分為多個(gè)“工作單元”（Fiber節(jié)點(diǎn)），通過(guò)`requestIdleCallback`（或`requestAnimationFrame`）在瀏覽器空閑時(shí)執(zhí)行，允許高優(yōu)先級(jí)任務(wù)（如用戶輸入）中斷當(dāng)前渲染；2.優(yōu)先級(jí)管理：每個(gè)Fiber節(jié)點(diǎn)有優(yōu)先級(jí)（如同步、用戶阻塞、空閑），高優(yōu)先級(jí)任務(wù)可插隊(duì)執(zhí)行，確保用戶交互即時(shí)響應(yīng)；3.雙緩存技術(shù)（DoubleBuffering）：維護(hù)當(dāng)前渲染的`current`樹和正在計(jì)算的`workInProgress`樹，切換時(shí)僅修改根指針，減少DOM操作開銷；4.更高效的Diff算法：基于Fiber節(jié)點(diǎn)的`key`和類型快速判斷是否復(fù)用，減少不必要的子樹遞歸。如何實(shí)現(xiàn)一個(gè)高性能的無(wú)限滾動(dòng)列表？無(wú)限滾動(dòng)需在長(zhǎng)列表中僅渲染可見(jiàn)區(qū)域，減少DOM節(jié)點(diǎn)數(shù)量。關(guān)鍵步驟：1.虛擬滾動(dòng)（VirtualScrolling）：計(jì)算當(dāng)前視口內(nèi)的可見(jiàn)項(xiàng)，僅渲染這些項(xiàng)的DOM節(jié)點(diǎn)；2.滾動(dòng)事件優(yōu)化：使用`IntersectionObserverAPI`檢測(cè)列表底部是否進(jìn)入視口（替代傳統(tǒng)的`scroll`事件監(jiān)聽，避免高頻回調(diào)）；3.列表項(xiàng)高度預(yù)估：若列表項(xiàng)高度不固定，可預(yù)存已渲染項(xiàng)的高度，或使用占位符（如平均高度）計(jì)算滾動(dòng)偏移量；4.緩存渲染項(xiàng)：維護(hù)一個(gè)渲染窗口（如當(dāng)前可見(jiàn)項(xiàng)前后各5項(xiàng)），滾動(dòng)時(shí)動(dòng)態(tài)替換超出窗口的項(xiàng)；5.性能增強(qiáng)：使用`will-change:transform`提示瀏覽器優(yōu)化滾動(dòng)層，或通過(guò)`CSSContainment`限制渲染范圍（`contain:strict`）。示例結(jié)構(gòu)：```html<divclass="scroll-container"style="height:600px;overflow:auto;"><divclass="placeholder"style="height:${totalHeight}px;"></div><divclass="visible-viewport"style="transform:translateY(${offset}px);">{visibleItems.map(item=><divkey={item.id}>{item.content}</div>)}</div></div>```TypeScript中如何實(shí)現(xiàn)類型安全的狀態(tài)管理？可通過(guò)泛型和類型斷言實(shí)現(xiàn)。例如，設(shè)計(jì)一個(gè)支持任意類型的狀態(tài)容器：```typescriptinterfaceStateContainer<T>{state:T;get:()=>T;set:(newState:Partial<T>)=>void;}functioncreateStateContainer<Textendsobject>(initialState:T):StateContainer<T>{letstate=initialState;return{get(){returnstate;},set(newState){state={...state,...newState};},state:initialState};}//使用示例constuserState=createStateContainer({name:'Alice',age:25});userState.set({age:26});//正確，age是number類型userState.set({name:123});//類型錯(cuò)誤，name應(yīng)為string```如何解決JavaScript中的內(nèi)存泄漏問(wèn)題？?jī)?nèi)存泄漏指不再使用的內(nèi)存未被垃圾回收。常見(jiàn)場(chǎng)景及解決方法：1.未移除的事件監(jiān)聽器：使用`removeEventListener`移除不再需要的監(jiān)聽（或在組件卸載時(shí)清理）；2.未清理的定時(shí)器：`clearTimeout`/`clearInterval`清除未完成的定時(shí)任務(wù)；3.閉包中引用DOM元素：若閉包長(zhǎng)期存在（如全局函數(shù)），避免直接引用已刪除的DOM節(jié)點(diǎn)；4.全局變量：避免向`window`對(duì)象隨意掛載變量（使用塊級(jí)作用域`let`/`const`替代）；5.緩存溢出：使用`WeakMap`/`WeakSet`替代`Map`/`Set`（弱引用不阻止垃圾回收）；6.被遺忘的訂閱：如Redux的`store.subscribe`需保存返回的取消訂閱函數(shù)，并在組件卸載時(shí)調(diào)用。檢測(cè)工具：ChromeDevTools的Memory面板（HeapSnapshot對(duì)比）或Performance面板記錄時(shí)間線，觀察內(nèi)存增長(zhǎng)趨勢(shì)。Webpack5的核心優(yōu)化有哪些？Webpack5針對(duì)現(xiàn)代前端場(chǎng)景優(yōu)化，主要改進(jìn)：1.持久化緩存（PersistentCaching）：將編譯結(jié)果緩存到磁盤，減少重復(fù)構(gòu)建時(shí)間（通過(guò)`cache:{type:'filesystem'}`配置）；2.模塊聯(lián)邦（ModuleFederation）：支持跨應(yīng)用共享代碼（如微前端中動(dòng)態(tài)加載其他應(yīng)用的模塊）；3.內(nèi)置的Node.jspolyfill移除：默認(rèn)不自動(dòng)填充`fs`/`path`等Node模塊（需手動(dòng)引入或設(shè)置`resolve.fallback`）；4.更高效的樹搖（TreeShaking）：通過(guò)`sideEffects`標(biāo)記優(yōu)化，移除未使用的ES模塊代碼；5.改進(jìn)的代碼分割（CodeSplitting）：支持`splitChunks`的`cacheGroups`更細(xì)粒度控制（如按包名分組）；6.更好的ESM支持：原生支持`import()`動(dòng)態(tài)導(dǎo)入和`module.exports`混合導(dǎo)出。ES2023-2024新增了哪些實(shí)用特性？近年ES標(biāo)準(zhǔn)新增特性包括：1.數(shù)組方法增強(qiáng)（ES2023）：`Atotype.findLast`/`findLastIndex`（從后往前查找），`Atotype.toSorted`/`toReversed`/`toSpliced`（返回新數(shù)組的不可變方法）；2.對(duì)象方法（ES2023）：`Object.groupBy`（按回調(diào)結(jié)果分組對(duì)象屬性），`Object.groupByToMap`（分組為Map）；3.符號(hào)與弱集合（ES2024）：`Symbol.species`支持自定義構(gòu)造函數(shù)，`WeakStotype.purge`（手動(dòng)清理已回收的弱引用）；4.類私有字段增強(qiáng)（ES2024）：允許私有字段在類表達(dá)式中使用，支持`privateinobj`檢查對(duì)象是否有私有字段；5.模板字符串改進(jìn)：支持標(biāo)記模板字符串的`raw`屬性直接訪問(wèn)原始字符串?dāng)?shù)組（`(strings,...values)=>strings.raw`）。如何設(shè)計(jì)一個(gè)線程安全的JS異步隊(duì)列？線程安全的異步隊(duì)列需保證任務(wù)按順序執(zhí)行，避免競(jìng)態(tài)條件。實(shí)現(xiàn)要點(diǎn)：1.任務(wù)隊(duì)列：使用數(shù)組存儲(chǔ)待執(zhí)行的任務(wù)；2.執(zhí)行狀態(tài)標(biāo)記：通過(guò)`isRunning`標(biāo)志防止多任務(wù)同時(shí)執(zhí)行；3.錯(cuò)誤處理：捕獲單個(gè)任務(wù)的錯(cuò)誤，避免中斷整個(gè)隊(duì)列；4.異步控制：使用async/await順序執(zhí)行任務(wù)，或通過(guò)Promise鏈鏈接任務(wù)。示例實(shí)現(xiàn)：```javascriptclassAsyncQueue{constructor(){this.queue=[];this.isRunning=false;}add(task){returnnewPromise((resolve,reject)=>{this.queue.push({task,resolve,reject});this.run();});}asyncrun(){if(this.isRunning||this.queue.length===0)return;this.isRunning=true;const{task,resolve,reject}=this.queue.shift();try{constresult=awaittask();resolve(result);}catch(error){reject(error);}finally{this.isRunning=false;this.run();//執(zhí)行下一個(gè)任務(wù)}}}```瀏覽器是如何解析并執(zhí)行JavaScript的？瀏覽器執(zhí)行JS的流程：1.解析HTML提供DOM樹，遇到`<script>`標(biāo)簽時(shí)暫停解析（除非`async`或`defer`）；2.JS引擎（如V8）解析JS代碼：詞法分析（LexicalAnalysis）：將字符流轉(zhuǎn)換為詞法單元（Tokens）；語(yǔ)法分析（Parsing）：提供抽象語(yǔ)法樹（AST）；字節(jié)碼提供（BytecodeGeneration）：將AST轉(zhuǎn)換為字節(jié)碼（V8的Ignition解釋器）；優(yōu)化編譯（Optimization）：通過(guò)TurboFan編譯器將熱點(diǎn)代碼（重復(fù)執(zhí)行的函數(shù)）編譯為機(jī)器碼；3.執(zhí)行代碼時(shí)，引擎維護(hù)調(diào)用棧（CallStack）和堆（Heap）：基本類型存儲(chǔ)在棧中，對(duì)象存儲(chǔ)在堆中；4.遇到異步操作（如`fetch`、`setTimeout`）時(shí)，調(diào)用瀏覽器API（如WebAPIs），完成后將回調(diào)放入任務(wù)隊(duì)列；5.事件循環(huán)協(xié)調(diào)調(diào)用棧和任務(wù)隊(duì)列，確保異步回調(diào)在合適時(shí)機(jī)執(zhí)行。如何用TypeScript實(shí)現(xiàn)一個(gè)裝飾器（Decorator）？裝飾器是修改類或類成員的函數(shù)，TS需啟用`experimentalDecorators`選項(xiàng)。示例：```typescript//類裝飾器：修改構(gòu)造函數(shù)functionlogClass(target:Function){console.log(`Class${}isdefined`);returnclassextendstarget{newMethod(){console.log('Newmethodaddedbydecorator');}};}//方法裝飾器：記錄方法調(diào)用functionlogMethod(target:any,key:string,descriptor:PropertyDescriptor){constoriginalMethod=descriptor.value;descriptor.value=function(...args:any[]){console.log(`Calling${key}withargs:${JSON.stringify(args)}`);returnoriginalMethod.apply(this,args);};returndescriptor;}@logClassclassUser{@logMethodgreet(name:string){return`Hello,${name}`;}}constuser=newUser();user.greet('Bob');//輸出：Callinggreetwithargs:["Bob"]和Hello,Bob```微前端架構(gòu)的核心挑戰(zhàn)及解決方案是什么？核心挑戰(zhàn)及應(yīng)對(duì)：1.應(yīng)用隔離：不同子應(yīng)用的JS作用域、CSS樣式?jīng)_突。解決方案：使用沙箱（如Proxy實(shí)現(xiàn)的JS沙箱限制全局變量修改），CSSModules或ShadowDOM隔離樣式；2.通信機(jī)制：子應(yīng)用與主應(yīng)用、子應(yīng)用間的數(shù)據(jù)傳遞。解決方案：全局事件總線（`CustomEvent`）、狀態(tài)管理庫(kù)（如Redux共享store）、或使用`window.postMessage`跨域通信；3.資源加載：動(dòng)態(tài)加載子應(yīng)用的JS/CSS資源并確保依賴不沖突。解決方案：使用模塊聯(lián)邦（Webpack5+）共享依賴，或通過(guò)`import()`動(dòng)態(tài)加載并添加`script`標(biāo)簽（需處理加載順序和錯(cuò)誤）；4.路由協(xié)調(diào)：主應(yīng)用與子應(yīng)用的路由映射。解決方案：主應(yīng)用管理頂層路由，子應(yīng)用處理自身路由（如通過(guò)`hash`或`history`API監(jiān)聽路由變化）。如何優(yōu)化單頁(yè)應(yīng)用（SPA）的首屏加載時(shí)間？?jī)?yōu)化策略包括：1.代碼分割（CodeSplitting）：使用`React.lazy`/`Vue.defineAsyncComponent`按需加載非首屏組件；2.資源壓縮：通過(guò)Terser壓縮JS，CSSNano壓縮CSS，圖片使用WebP/AVIF格式（比PNG/JPEG小25%-50%）；3.預(yù)加載關(guān)鍵資源：使用`<linkrel="preload">`優(yōu)先加載首屏必需的JS/CSS；4.服務(wù)端渲染（SSR）或靜態(tài)站點(diǎn)提供（SSG）：如Next.js的`getStaticProps`提供靜態(tài)HTML，減少客戶端JS執(zhí)行時(shí)間；5.減少包體積：移除未使用的依賴（`webpack-bundle-analyzer`分析），使用TreeShaking刪除無(wú)效代碼；6.緩存策略：設(shè)置合理的HTTP緩存頭（如`Cache-Control:max-age=31536000`），利用ServiceWorker緩存靜態(tài)資源。JavaScript中`this`的指向如何確定？`this`的指向在函數(shù)調(diào)用時(shí)動(dòng)態(tài)確定，規(guī)則如下：1.普通函數(shù)調(diào)用：非嚴(yán)格模式下`this`指向全局對(duì)象（瀏覽器為`window`，Node為`global`）；嚴(yán)格模式下為`undefined`；2.方法調(diào)用：`obj.method()`中`this`指向`obj`（注意`constfn=obj.method;fn()`會(huì)退化為普通調(diào)用）；3.構(gòu)造函數(shù)調(diào)用：`newFn()`中`this`指向新創(chuàng)建的實(shí)例對(duì)象；4.`call`/`apply`/`bind`顯式綁定：`fn.call(obj)`強(qiáng)制`this`為`obj`（`bind`返回新函數(shù)，`this`固定）；5.箭頭函數(shù)：`this`繼承自外層詞法作用域（定義時(shí)確定，無(wú)法通過(guò)`call