前端面试题

以下是几道前端面试中高频且能体现综合能力的题目，涵盖 JavaScript 深入理解、框架原理和工程化实践，附详细解题思路：

1. 请解释 JavaScript 中的原型继承与 Class 继承的区别，并用代码举例说明

• 解题思路：
  • 原型继承：基于原型链实现，通过Object.create()或构造函数的prototype属性让子对象继承父对象的属性和方法，是 JS 原生的继承方式。

      this.name = 'parent';
    }
    Parent.prototype.sayName = function() {
      console.log(this.name);
    };
    function Child() {
      Parent.call(this); // 继承实例属性
      this.age = 18;
    }
    // 继承原型方法
    Child.prototype = Object.create(Parent.prototype);
    Child.prototype.constructor = Child;

    以下是几道前端面试中高频且能体现综合能力的题目，涵盖JavaScript深入理解、框架原理和工程化实践，附详细解题思路： ### 1. 请解释JavaScript中的原型继承与Class继承的区别，并用代码举例说明 - **解题思路**： - 原型继承：基于原型链实现，通过`Object.create()`或构造函数的`prototype`属性让子对象继承父对象的属性和方法，是JS原生的继承方式。 ```javascript // 原型继承示例 function Parent() { this.name = 'parent'; } Parent.prototype.sayName = function() { console.log(this.name); }; function Child() { Parent.call(this); // 继承实例属性 this.age = 18; } // 继承原型方法 Child.prototype = Object.create(Parent.prototype); Child.prototype.constructor = Child; ``` - Class继承：ES6语法糖，通过`class`和`extends`关键字实现，本质还是基于原型链，但语法更接近传统面向对象，包含`super`关键字用于调用父类构造函数。 ```javascript // Class继承示例 class Parent { constructor() { this.name = 'parent'; } sayName() { console.log(this.name); } } class Child extends Parent { constructor() { super(); // 必须调用super()才能使用this this.age = 18; } } ``` - 核心区别：Class继承更规范，强制要求`super()`调用，避免原型链混乱；原型继承需手动处理构造函数指向，易出现`constructor`丢失等问题。 ### 2. React中useState的更新是同步还是异步？为什么？如何获取更新后的值？ - **解题思路**： - 更新特性：在React合成事件（如`onClick`）和生命周期钩子中，`useState`的更新是异步的；在原生事件（如`addEventListener`绑定的事件）和`setTimeout`中，更新是同步的。 - 原因：React为优化性能，会将多个状态更新合并成一次重新渲染，减少DOM操作次数，因此在合成事件中会批量处理状态更新。 - 获取更新后的值： - 方法1：使用`setState`的函数形式（`setCount(prev => prev + 1)`），通过prev参数获取最新状态。 - 方法2：使用`useEffect`监听状态变化，在回调中获取更新后的值。 ```javascript const [count, setCount] = useState(0); useEffect(() => { console.log('更新后的值：', count); }, [count]); // 依赖count，count变化时执行 ``` ### 3. 什么是前端工程化？主要包含哪些内容？如何通过Webpack实现代码分割？ - **解题思路**： - 前端工程化：是将前端开发流程规范化、自动化、高效化的一系列方法论和工具链，解决传统开发中依赖管理混乱、代码冗余、部署繁琐等问题。 - 主要内容：模块化（ES Module/CommonJS）、组件化（封装可复用UI）、自动化构建（Webpack/Vite）、代码规范（ESLint/Prettier）、测试（Jest/Cypress）、CI/CD（持续集成/部署）。 - Webpack实现代码分割： - 方式1：通过`splitChunks`配置提取公共依赖（如第三方库）。 ```javascript // webpack.config.js module.exports = { optimization: { splitChunks: { chunks: 'all', // 对所有类型的chunk（同步/异步）进行分割 cacheGroups: { vendor: { // 提取node_modules中的依赖 test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all' } } } } }; ``` - 方式2：使用动态`import()`语法实现路由或组件的按需加载（异步加载）。 ```javascript // React中路由懒加载示例 import { lazy, Suspense } from 'react'; const Home = lazy(() => import('./Home')); // 使用时用Suspense包裹 <Suspense fallback={<div>Loading...</div>}> <Home /> </Suspense> ``` ### 下一步迭代建议 需要我针对这些题目补充对应的面试易错点和延伸知识点吗？