前端开发是当今互联网行业中非常热门的职业，随着技术的不断更新，面试题目也在不断进化。针对前端笔试，本文总结了30道经典面试题，并结合代码示例详细解析，帮助求职者更好地准备前端面试。
1. JavaScript 基础
题目：解释 this 的指向。
this 是一个在函数调用时确定的关键字，它的值取决于函数的调用方式。
const obj = {
name: 'Alice',
greet: function() {
console.log(this.name);
}
};
obj.greet(); // 输出 'Alice'
在上面的代码中，this 指向 obj。如果将 greet 赋值给一个变量，然后调用它，this 就会指向全局对象（在浏览器中是 window）。
2. 原型与原型链
题目：解释原型链的工作机制。
原型链是 JavaScript 实现继承的机制。每个对象都有一个原型对象，通过 __proto__ 链接到其原型对象。
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function() {
console.log('Hello, ' + this.name);
};
const alice = new Person('Alice');
alice.sayHello(); // 'Hello, Alice'
在此示例中，alice 对象继承了 Person.prototype 上的方法。
3. 闭包
题目：什么是闭包，它有什么用？
闭包是一种可以“记住”并访问外部函数作用域的函数，即使外部函数已经执行完毕。
function makeCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = makeCounter();
console.log(counter()); // 输出 1
console.log(counter()); // 输出 2
使用闭包，可以创建私有变量 count，外部无法直接访问。
4. 异步编程
题目：解释 Promise 的工作机制。
Promise 是一种用于处理异步操作的对象。它有三种状态：pending、fulfilled、rejected。
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("成功"); // 状态转为 fulfilled
}, 1000);
});
myPromise.then(result => {
console.log(result); // 输出 '成功'
}).catch(error => {
console.log(error);
});
5. 数组与对象的操作
题目：如何合并两个对象？
可以使用 Object.assign 或者扩展运算符 ... 来合并对象。
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
// 使用 Object.assign
const merged1 = Object.assign({}, obj1, obj2);
console.log(merged1); // { a: 1, b: 3, c: 4 }
// 使用扩展运算符
const merged2 = { ...obj1, ...obj2 };
console.log(merged2); // { a: 1, b: 3, c: 4 }
6. DOM 操作
题目：如何通过 JavaScript 动态创建一个元素并插入到页面中？
可以使用 document.createElement 方法创建元素。
const newDiv = document.createElement("div");
newDiv.innerHTML = "Hello, World!";
document.body.appendChild(newDiv);
7. 事件处理
题目：如何避免事件的默认行为？
可以使用 event.preventDefault() 方法。
document.querySelector('a').addEventListener('click', (event) => {
event.preventDefault(); // 防止链接跳转
console.log('链接被点击了');
});
8. CSS 选择器
题目：选择器的优先级是什么？
CSS 选择器的优先级由以下顺序决定：内联样式 > ID 选择器 > 类选择器 > 元素选择器。
9. 响应式设计
题目：什么是响应式布局，如何实现？
响应式布局是指根据不同的屏幕尺寸和方向调整布局。可以使用媒体查询：
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
总结
前端笔试中的经典题目涵盖了从基本的 JavaScript 语法，DOM 操作，到高级的原型链和闭包等方面的内容。通过不断地练习这些问题，并尝试实现代码示例，求职者不仅能提升自己的编码能力，还能在面试中表现出色。希望本文的总结能够帮助您在前端面试中脱颖而出。
