当晨光温柔地爬上窗台，泡一杯热气腾腾的咖啡，在这静谧美好的晨间时光里，让我们抛开忙碌与焦虑，静下心来聊聊两道 JavaScript 高频面试题。就像在宁静的花园中漫步，悠然自得地收获知识，为面试储备能量。

第一题：JavaScript 中的异步加载与模块化

面试官常常会问：“说一说 JavaScript 中异步加载的方式有哪些？模块化又是什么，有哪些常见的模块化规范？” 别担心，这看似复杂的问题，就像安排一场聚会，不同的朋友（资源）用不同的方式到场，而模块化就是给这些朋友安排不同的房间（模块），让一切井井有条。

异步加载方式

// 方式一：使用script标签的async属性
// async属性让脚本异步加载，加载完立即执行，不等待其他脚本
// 适合不依赖其他脚本且相互独立的脚本
<script async src="script1.js"></script>
// 方式二：使用script标签的defer属性
// defer属性让脚本异步加载，等到DOM解析完成后按顺序执行
// 适合DOMContentLoaded事件之前需要执行的脚本
<script defer src="script2.js"></script>
// 方式三：使用fetch API动态加载脚本
// 先通过fetch获取脚本内容，再通过eval执行
async function loadScript() {
const response = await fetch('script3.js');
const scriptText = await response.text();
eval(scriptText);
}
loadScript();

模块化规范

// CommonJS规范（Node.js中常用）
// 导出模块
module.exports = {
add: function(a, b) {
return a + b;
}
};
// 导入模块
const math = require('./math.js');
console.log(math.add(2, 3));
// ES6模块化
// 导出模块
export function subtract(a, b) {
return a - b;
}
// 导入模块
import { subtract } from './math.js';
console.log(subtract(5, 3));

在实际开发中，异步加载可以避免网页因加载脚本而阻塞，提升用户体验；模块化则能让代码结构更清晰，方便维护和复用，不同的模块化规范适用于不同的开发场景。

第二题：ES6 中的 Class 类与继承

“请讲讲 ES6 中的 Class 类是什么，它是如何实现继承的？和传统的构造函数继承有什么区别？” 这就好比创建不同类型的 “交通工具”，Class 类像是一个更简洁的 “蓝图”，而继承就是让新的 “交通工具” 拥有已有 “交通工具” 的特性。

// 定义一个父类（基础蓝图）
class Vehicle {
constructor(name) {
this.name = name;
}
start() {
console.log(`${this.name}启动了`);
}
}
// 定义一个子类（继承父类的蓝图并扩展）
class Car extends Vehicle {
constructor(name, brand) {
super(name); // 调用父类的构造函数
this.brand = brand;
}
drive() {
console.log(`${this.brand}的${this.name}正在行驶`);
}
}
// 创建一个Car实例
const myCar = new Car('小轿车', '大众');
myCar.start();
myCar.drive();

ES6 的 Class 类通过extends关键字实现继承，使用super关键字调用父类的构造函数和方法，语法更加简洁直观。与传统的构造函数继承相比，Class 类的写法更符合面向对象的编程思维，代码可读性和维护性更强。

面试应答模板

异步加载与模块化问题回答

“JavaScript 的异步加载主要有几种方式。用script标签的async属性，脚本会异步加载，加载完就立刻执行，适合那些相互独立、不依赖其他脚本的资源；defer属性也是异步加载，但会等到 DOM 解析完成后，按照脚本在文档中的顺序执行，适合在 DOMContentLoaded 事件之前需要运行的脚本。还可以用fetch API 动态获取脚本内容再执行。模块化呢，就是把代码分成一个个独立的模块，每个模块有自己的作用域和功能。常见的规范有 CommonJS，在 Node.js 里用得很多，通过module.exports导出，require导入；还有 ES6 模块化，用export和import，语法更简洁，现在浏览器和很多前端项目都在广泛使用，模块化能让代码更好管理，方便复用。”

ES6 中的 Class 类与继承问题回答

“ES6 的 Class 类其实是构造函数的语法糖，让面向对象编程的写法更简单清晰。它用class关键字定义类，constructor是构造函数，用来初始化实例属性。继承通过extends关键字实现，子类可以继承父类的属性和方法，用super关键字调用父类的构造函数和方法。和传统构造函数继承比起来，Class 类的代码更直观，比如定义子类和调用父类方法都更简洁，不用像以前那样通过原型链和借用构造函数等复杂操作，大大提高了代码的可读性和可维护性。”

在这宁静的晨间时光里，我们一起完成了一次知识的轻松探索。关于这些面试题，你有什么新的想法或疑问，欢迎在评论区分享交流。觉得有帮助的话，别忘了点赞关注，明天清晨，我们继续相约，解锁更多有趣的前端知识！

Tags：前端面试问题

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。