前端八股文都不会，还想靠“临场发挥”拿Offer?

在如今的前端面试中，“八股文”早已成为标配。所谓“八股”，并不是贬义词，而是指那些高频、基础、必须掌握的核心知识点。如果你连这些都不懂，还想靠临场反应和项目经验拿下大厂Offer，那只能说——路走窄了。

今天我们就来盘点一下前端八股文中的几个核心问题，并配上代码示例，帮助你打牢基础，稳过技术面！

一、闭包是什么？有什么作用？

闭包是 JavaScript 中非常重要的概念之一，也是面试常考点。

Javascript
function outer() {
let count = 0;
return function inner() {
count++;
console.log(count);
};
}
const counter = outer();
counter(); // 1
counter(); // 2

解释：

inner 函数访问了外部函数 outer 中的变量 count。

即使 outer 执行完毕，由于 inner 仍然引用着 count，所以不会被垃圾回收机制回收。

这就形成了一个闭包。

二、this 的指向问题

this 是 JS 中最容易出错的关键字之一，不同调用方式会改变它的指向。

Javascript
const obj = {
name: 'Qwen',
sayName: function () {
console.log(this.name);
},
sayNameArrow: () => {
console.log(this.name);
}
};
obj.sayName(); // Qwen
obj.sayNameArrow(); // undefined（箭头函数没有自己的 this）

总结：

普通函数的 this 在运行时决定，取决于调用者。

箭头函数没有自己的 this，它继承自外层作用域。

三、原型与原型链

理解原型和原型链是深入掌握 JavaScript 面向对象编程的基础。

Javascript
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function () {
console.log(`Hello, I'm ${this.name}`);
};
const p1 = new Person('Tom');
p1.sayHello(); // Hello, I'm Tom

原型链结构：

p1.__proto__ === Person.prototype
Person.prototype.__proto__ === Object.prototype
Object.prototype.__proto__ === null

四、防抖与节流

这两个函数优化技巧几乎是前端必问内容。

防抖（debounce）

Javascript
function debounce(fn, delay) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
使用场景：搜索框输入、窗口大小调整等。
节流（throttle）

Javascript
function throttle(fn, delay) {
let last = 0;
return (...args) => {
const now = Date.now();
if (now - last > delay) {
last = now;
fn.apply(this, args);
}
};
}

使用场景：滚动事件、resize、鼠标移动等。

五、Vue 响应式原理简析

以 Vue 2.x 为例，响应式核心是通过 Object.defineProperty 实现的。

Javascript
let data = { message: 'Hello Vue' };
Object.keys(data).forEach(key => {
let value = data[key];
Object.defineProperty(data, key, {
get() {
console.log(`get ${key}: ${value}`);
return value;
},
set(newValue) {
console.log(`set ${key}: ${newValue}`);
value = newValue;
}
});
});
data.message; // get message: Hello Vue
data.message = 'Hi Vue'; // set message: Hi Vue

说明：

Vue 2 使用 defineProperty 来劫持数据属性。

Vue 3 则使用 Proxy 实现更高效的响应式系统。

六、Promise 和 async/await

异步编程是前端开发的核心能力之一，Promise 是 ES6 引入的重要特性。

Javascript
function fetchUser(id) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ id, name: 'User' + id });
}, 1000);
});
}
async function getUser() {
try {
const user = await fetchUser(1);
console.log(user); // { id: 1, name: 'User1' }
} catch (err) {
console.error(err);
}
}
getUser();

优势：

Promise 解决了回调地狱问题。

async/await 让异步代码看起来像同步代码，可读性更强。

结语：别再忽视八股文了！

前端面试虽然“卷”，但基础知识才是你的底气。八股文不是死记硬背，而是对知识的理解和运用。只有真正掌握了这些底层原理，才能在实际开发中游刃有余。

连八股文都不会，还想在前端圈混下去？醒醒吧兄弟！