前端八股文都不会,还想靠“临场发挥”拿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 让异步代码看起来像同步代码,可读性更强。

结语:别再忽视八股文了!

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

连八股文都不会,还想在前端圈混下去?醒醒吧兄弟!

原文链接:,转发请注明来源!