前端八股文-高频面试题

前端八股文-高频面试题 - 教程

HTML & CSS 篇

1. 盒模型

问：说说CSS盒模型，以及box-sizing的作用？

标准盒模型：width和height只包含内容。
IE盒模型：width和height包含内容、内边距和边框。
box-sizing：
- content-box：标准模型（默认）。
- border-box：IE模型。更直观，开发常用。

2. 居中对齐

问：如何实现一个元素的水平垂直居中？（至少说出3种）

Flexbox（首选）：

.parent {
display: flex;
justify-content: center;
align-items: center;
}

Grid：

.parent {
display: grid;
place-items: center;
}

定位 + Transform：

.child {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}

3. BFC

问：什么是BFC？如何触发？有什么作用？

定义：块级格式化上下文，一个独立的渲染区域。
触发条件：float不为none、overflow不为visible、display: inline-block/flex/table-cell、position: absolute/fixed等。
作用：
1. 清除浮动（防止高度塌陷）。
2. 防止外边距重叠。
3. 隔离元素，阻止元素被浮动元素覆盖。

4. 选择器与优先级

问：CSS选择器的优先级如何计算？

!important > 行内样式 > ID选择器 > 类/伪类/属性选择器 > 元素/伪元素选择器 > 通配符。
计算规则：(a, b, c, d)
- a: 行内样式
- b: ID选择器个数
- c: 类、伪类、属性选择器个数
- d: 元素、伪元素选择器个数
- 从左到右逐级比较。

JavaScript 篇（核心中的核心）

1. 事件循环

问：说出下面代码的输出顺序

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);
// 输出：1, 4, 3, 2

原理：
1. 同步代码（宏任务）先执行：1, 4。
2. 清空微任务队列：Promise.then -> 3。
3. 执行下一个宏任务：setTimeout -> 2。

2. 闭包

问：什么是闭包？有什么作用和缺点？

定义：函数能够记住并访问其词法作用域，即使该函数在其作用域之外执行。
作用：
1. 创建私有变量和方法（模块模式）。
2. 实现柯里化和函数式编程。
缺点： improper use can lead to 内存泄漏。

3. `this` 指向

问：如何确定函数中this的指向？

默认绑定：严格模式undefined，非严格模式window。
隐式绑定：obj.foo() -> this指向obj。
显式绑定：call/apply/bind -> 指向第一个参数。
new绑定：指向新创建的对象。
箭头函数：继承定义时外层作用域的this，无法被改变。

4. 原型与原型链

问：说说原型链的理解？

每个对象都有一个__proto__属性，指向它的构造函数的prototype。
当访问一个对象的属性时，如果自身没有，就通过__proto__向上查找，这条链就是原型链，终点是Object.prototype.__proto__（null）。

5. 手写代码（必考！）

手写 Promise.all

Promise.myAll = function(promises) {
return new Promise((resolve, reject) => {
const results = [];
let count = 0;
promises.forEach((promise, i) => {
Promise.resolve(promise).then(res => {
results[i] = res;
if (++count === promises.length) resolve(results);
}).catch(reject);
});
});
};

手写 bind

Function.prototype.myBind = function(context, ...args) {
const fn = this;
return function(...innerArgs) {
return fn.apply(context, [...args, ...innerArgs]);
};
};