前端高频面试题

JavaScript 高频题

1. 闭包的概念和应用场景

• 闭包的定义：闭包是指有权访问另一个函数作用域中变量的函数
• 闭包的优缺点：
  • 优点：可以创建私有变量、延长变量生命周期、实现模块化
  • 缺点：可能导致内存泄漏
• 实际应用场景：模块化开发、防抖节流函数、柯里化函数、私有变量实现

2. 原型链的理解

• 原型链的工作原理：由对象的 __proto__ 属性连接起来的链式结构
• 原型继承：通过原型链实现对象之间的继承关系
• __proto__ 和 prototype 的区别：
  • __proto__ 是对象的属性，指向其构造函数的原型
  • prototype 是函数的属性，是创建实例时的原型对象

3. this 关键字的指向

• 全局上下文：指向 window (非严格模式) 或 undefined (严格模式)
• 函数调用：指向调用该函数的对象
• 构造函数调用：指向新创建的实例
• apply/call/bind：可以改变 this 指向
• 箭头函数：继承外层作用域的 this

加载中...

CSS 高频题

1. BFC 概念

• BFC 的定义：块级格式化上下文（Block Formatting Context），是一个独立的渲染区域
• BFC 的触发条件：
  • 根元素
  • float 属性不为 none
  • position 属性为 absolute 或 fixed
  • display 属性为 inline-block、table-cell、table-caption、flex、inline-flex
  • overflow 属性不为 visible
• BFC 的应用场景：
  • 清除浮动
  • 防止 margin 重叠
  • 防止元素被浮动元素覆盖
  • 实现两栏布局

2. 盒模型

• 标准盒模型 vs IE 盒模型：
  • 标准盒模型：width/height 仅包括内容区域
  • IE盒模型：width/height 包括内容、内边距和边框
• box-sizing 属性的作用：控制元素的盒模型类型
  • content-box：标准盒模型
  • border-box：IE盒模型
• 如何计算元素的实际宽度：
  • 标准盒模型：width + padding-left + padding-right + border-left + border-right
  • IE盒模型：width（已包含 padding 和 border）

加载中...

前端框架高频题

1. React vs Vue 的区别

• React：
  • 使用 JSX 语法
  • 单向数据流
  • 虚拟 DOM
  • 生态系统丰富
  • 适合大型应用
• Vue：
  • 使用模板语法（也支持 JSX）
  • 双向数据绑定
  • 虚拟 DOM
  • 学习曲线平缓
  • 适合中小型应用

2. 虚拟 DOM 的优势

• 减少 DOM 操作，提高性能
• 跨平台渲染（React Native、Weex）
• 批量更新，减少重排重绘
• 简化 DOM 操作的复杂度

加载中...