前端八股文 - JavaScript 篇
1. 数据类型
1.1 基本数据类型
- Number
- String
- Boolean
- Null
- Undefined
- Symbol (ES6)
- BigInt (ES11)
1.2 引用数据类型
- Object
- Array
- Function
- Date
- RegExp
1.3 类型判断
typeof
:可以判断基本类型(除null返回object外)instanceof
:判断引用类型Object.prototype.toString.call()
:最准确的类型判断方法Array.isArray()
:判断数组
2. 作用域与闭包
2.1 作用域
- 全局作用域
- 函数作用域
- 块级作用域(ES6 let/const)
2.2 闭包
- 定义:函数和其周围状态(词法环境)的引用捆绑在一起形成闭包
- 特点:
- 可以访问外部函数作用域中的变量
- 外部函数执行完毕后,内部函数仍能访问其变量
- 应用场景:
- 模块化
- 私有变量
- 函数柯里化
- 防抖节流
3. 原型与继承
3.1 原型链
- 每个对象都有
__proto__
属性指向其构造函数的prototype - 查找属性时沿着原型链向上查找
3.2 继承方式
- 原型链继承
- 构造函数继承
- 组合继承
- 原型式继承
- 寄生式继承
- 寄生组合式继承(最优)
- ES6 class继承
4. this指向
4.1 绑定规则
- 默认绑定:全局或undefined(严格模式)
- 隐式绑定:对象方法调用
- 显式绑定:call/apply/bind
- new绑定:构造函数
4.2 优先级
new绑定 > 显式绑定 > 隐式绑定 > 默认绑定
4.3 箭头函数
- 没有自己的this,继承外层函数调用的this
- 不能作为构造函数
- 没有arguments对象
5. 异步编程
5.1 回调函数
- 回调地狱问题
5.2 Promise
- 三种状态:pending、fulfilled、rejected
- 方法:
- then()
- catch()
- finally()
- all()
- race()
- allSettled()
- any()
5.3 Generator
- function*
- yield
- next()
5.4 Async/Await
- 语法糖
- 错误处理用try/catch
6. ES6+新特性
6.1 常用特性
- let/const
- 箭头函数
- 模板字符串
- 解构赋值
- 默认参数
- 剩余参数
- 扩展运算符
- 对象属性简写
- Promise
- Class
- Module
6.2 新增API
- Array: find/findIndex/includes/flat
- Object: assign/keys/values/entries
- String: startsWith/endsWith/includes/padStart/padEnd
- Set/Map/WeakSet/WeakMap
7. 事件循环
7.1 执行机制
- 同步任务进入主线程
- 异步任务进入Event Table并注册回调函数
- 当指定事件完成时,Event Table将回调移入Event Queue
- 主线程任务执行完毕,检查Event Queue中的回调并执行
7.2 宏任务与微任务
- 宏任务:script、setTimeout、setInterval、I/O、UI渲染
- 微任务:Promise.then、MutationObserver、process.nextTick
- 执行顺序:同步任务 > 微任务 > 宏任务
8. 内存管理
8.1 垃圾回收
- 标记清除(主流)
- 引用计数(循环引用问题)
8.2 内存泄漏
- 全局变量
- 定时器未清除
- 闭包不当使用
- DOM引用未释放
- 事件监听未移除
9. 常用设计模式
9.1 创建型
- 工厂模式
- 单例模式
- 原型模式
9.2 结构型
- 适配器模式
- 装饰器模式
- 代理模式
9.3 行为型
- 观察者模式
- 发布订阅模式
- 策略模式
10. 性能优化
10.1 代码层面
- 减少DOM操作
- 事件委托
- 防抖节流
- 懒加载
- 虚拟列表
10.2 网络层面
- 资源压缩
- CDN加速
- HTTP缓存
- 雪碧图
- 按需加载
10.3 工具层面
- Webpack优化
- Tree Shaking
- Code Splitting
- Gzip压缩