前端核心面试题与实战指南 | 极客日志

JavaScript大前端算法

前端核心面试题与实战指南

涵盖前端面试核心知识点，包括闭包原理、事件循环机制、BFC 布局、内存泄漏排查、Vue 响应式与虚拟 DOM 原理、ES6 新特性、HTTP 缓存策略及性能优化方案。内容从基础语法到架构模式，结合代码示例解析常见陷阱与解决方案，适合求职者系统复习或开发者查漏补缺。

道系青年发布于 2026/3/21更新于 2026/6/2024 浏览

前端核心面试题与实战指南

闭包

定义

闭包（Closure） 是指一个函数能够访问并记住其外部作用域中的变量，即使外部函数已经执行完毕。闭包由两部分组成：

一个函数（通常是内部函数）。
该函数被创建时所在的作用域（即外部函数的变量环境）

function outer() {
  let count = 0; // 外部函数的变量
  function inner() {
    count++; // 内部函数访问外部变量
    console.log(count);
  }
  return inner;
}
const counter = outer();
counter(); // 输出 1
counter(); // 输出 2

核心原理

作用域链：函数在定义时，会记住自己的词法环境（即外部作用域）。当内部函数访问变量时，会沿着作用域链向上查找。
变量持久化：闭包使得外部函数的变量不会被垃圾回收，因为内部函数仍持有对它们的引用。

常见用途

私有变量封装

通过闭包隐藏内部变量，仅暴露操作接口：

function createCounter() {
  let count = 0; // 私有变量
  return {
    increment: () => count++,
    getValue: () => count
  };
}
const counter = createCounter();
counter.increment();
console.log(counter.getValue()); // 输出 1

相关免费在线工具

加密/解密文本
使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。在线工具，加密/解密文本在线工具，online
Gemini 图片去水印
基于开源反向 Alpha 混合算法去除 Gemini/Nano Banana 图片水印，支持批量处理与下载。在线工具，Gemini 图片去水印在线工具，online
Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码

function add(a) {
  return function(b) {
    return a + b;
  };
}
const add5 = add(5);
console.log(add5(3)); // 输出 8

function setupButton() {
  const button = document.getElementById('myButton');
  let clicks = 0;
  button.addEventListener('click', function() {
    clicks++;
    console.log(`按钮被点击了 ${clicks} 次`);
  });
}
// 每次点击都会更新同一个 clicks 变量

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 输出 3, 3, 3
  }, 100);
}

// 使用 IIFE
for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j); // 输出 0, 1, 2
    }, 100);
  })(i);
}

// 使用 let（块级作用域）
for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 输出 0, 1, 2
  }, 100);
}

function heavyProcess() {
  const largeData = new Array(1000000).fill('data');
  return function() {
    console.log(largeData.length);
  };
}
const leak = heavyProcess(); // largeData 被闭包引用，无法回收

leak = null; // 手动解除对闭包的引用

console.log('1'); // 同步任务
setTimeout(() => {
  console.log('2'); // 宏任务
}, 0);
Promise.resolve().then(() => {
  console.log('3'); // 微任务
});
console.log('4'); // 同步任务
// 输出顺序：1 → 4 → 3 → 2

.parent { overflow: hidden; /* 触发 BFC */ }

前端核心面试题与实战指南

前端核心面试题与实战指南

闭包

定义

核心原理

常见用途

私有变量封装

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

函数柯里化（Currying）

事件处理与回调

陷阱与解决方案

循环中的闭包问题

内存泄漏

事件循环（Event Loop）

定义

核心概念

执行流程

示例

应用场景

BFC（块级格式化上下文）

定义

触发条件

特性与应用

内存泄漏

定义

常见场景

排查与避免

Vue 的虚拟 DOM

工作原理

优点

MVVM

定义

核心概念

Vue2 与 Vue3 响应式原理

Vue2

Vue3

深拷贝与浅拷贝

区别

实现方式

npm 依赖管理

开发依赖 vs 生产依赖

版本号符号

ES6 模块化

Vue 中 key 的作用

CSS 选择器优先级

JavaScript 阻塞问题

Promise 功能与用法

大量数据处理策略

兼容性处理

CSS 绘制椭圆

setTimeout 与 setInterval

性能指标与检测

HTTP 状态码

箭头函数与普通函数

防抖与节流

宏任务与微任务

跨域问题

提高加载速度

页签消息传递

元素水平居中

let、const 与 var

作用域与作用域链

JavaScript 继承

缓存与持久化

require 与 import

px、em 与 rem

盒模型

ES6 新特性

HTTP 缓存

Vue Router 模式

JavaScript 缺点

原型与原型链

XSS 与 CSRF

HTTP 详解

分片（Chunking）

懒加载原理

脱离文档流

堆与栈