2年前端面试题及答案 在前端开发领域，面试是一个不断学习和提升的过程。无论是刚入行的新手还是有经验的老手，都需要对常见的面试问题有所准备。本文将结合过去两年中常见的前端面试题目，为大家提供详细的解答，希望能帮助大家更好地应对面试。 1. JavaScript中的闭包是什么？它有什么作用？ 解答： 闭包是指一个函数能够记住并访问它的词法作用域，即使这个函数在其词法作用域之外被调用。简单来说，闭包就是函数和与其相关的引用环境组合而成的一个整体。 闭包的作用包括： - 数据封装：通过闭包可以创建私有变量，避免全局污染。 - 延迟执行：闭包可以让函数记住其定义时的状态，从而实现延迟执行的效果。 - 模块化编程：利用闭包实现模块化编程，提高代码的可维护性和复用性。 示例代码： ```javascript function createCounter() { let count = 0; return function() { return count++; } } const counter = createCounter(); console.log(counter()); // 输出 0 console.log(counter()); // 输出 1 ``` 2. 什么是事件委托？为什么使用事件委托？ 解答： 事件委托是一种利用事件冒泡机制来处理事件的方式。通过将事件监听器绑定到父元素上，而不是每个子元素上，可以减少事件处理器的数量，从而提高性能。 事件委托的优点： - 性能优化：减少事件处理器的注册数量，特别是在动态生成大量DOM元素时。 - 灵活性：可以动态添加或移除子元素而不需重新绑定事件。 示例代码： ```javascript document.getElementById('parent').addEventListener('click', function(event) { if (event.target.matches('button')) { console.log('Button clicked'); } }); ``` 3. React中的状态（State）和属性（Props）的区别是什么？ 解答： 在React中，状态（State）和属性（Props）是两个重要的概念，它们的主要区别如下： - State：状态是组件内部的数据，通常用于控制组件的行为和渲染。状态是可变的，并且可以通过`setState`方法进行更新。 - Props：属性是父组件传递给子组件的数据，是只读的，子组件不能直接修改属性。 示例代码： ```javascript class MyComponent extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } increment = () => { this.setState({ count: this.state.count + 1 }); }; render() { return ( ); } } ``` 4. 如何实现页面的懒加载？ 解答： 懒加载是一种优化技术，用于延迟加载页面中的非关键资源，比如图片或脚本，直到它们需要显示在视口内时才加载。这样可以减少初始加载时间，提高页面性能。 懒加载的实现方式： - Intersection Observer API：现代浏览器支持的一种API，可以高效地检测元素是否进入视口。 - 滚动事件监听：通过监听滚动事件来判断元素是否进入视口。 示例代码： ```javascript const lazyImages = document.querySelectorAll('img[data-src]'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.getAttribute('data-src'); observer.unobserve(img); } }); }); lazyImages.forEach(img => observer.observe(img)); ``` 5. 什么是CSS的盒模型？如何设置元素的盒模型为标准模式？ 解答： CSS盒模型描述了HTML元素如何被渲染成矩形框。它由内容区域、内边距、边框和外边距组成。盒模型有两种模式：标准模式（content-box）和怪异模式（border-box）。 要将元素的盒模型设置为标准模式，可以使用以下CSS规则： ```css { box-sizing: content-box; } ``` 如果希望所有元素都采用怪异模式，则可以设置为： ```css { box-sizing: border-box; } ``` 总结来说，了解这些基础知识对于前端开发者来说是非常重要的。通过不断练习和积累经验，相信每位开发者都能在面试中展现出自己的实力。希望本文提供的内容能对你有所帮助！