前端小伙伴们，面试准备别焦虑！今天咱们用喝杯茶的时间，聊 3 道 JavaScript 高频基础题。没有复杂术语，只有接地气的解析和实用技巧，帮你把基础分稳稳攥在手里，面试时轻松应对面试官的 “灵魂拷问”！

第一题：this 指向 ——JS 里的 “动态跟班”

面试官提问：“详细说明 JavaScript 中 this 的绑定规则，不同场景下如何确定指向？”

代码示例：用生活场景理解 this 的 “跟班逻辑”

// 场景1：全局环境调用，this是“全局管家”（浏览器中是window）
console.log(this); // 输出Window（浏览器环境）
// 场景2：对象方法调用，this是“专属助理”（指向当前对象）
const calculator = {
num: 10,
add function(value) {
return this.num + value; // this指向calculator对象
}
};
console.log(calculator.add(5)); // 输出15
// 场景3：构造函数调用，this是“新生实例”（创建的新对象）
function Person(name) {
this.name = name; // this指向新创建的Person实例
}
const alice = new Person('Alice');
console.log(alice.name); // 输出Alice
// 场景4：箭头函数，this是“外层复制体”（继承外层作用域的this）
const timer = {
interval: 1000,
start function() {
setInterval(() => {
console.log(this.interval); // 箭头函数的this等于外层的this（timer对象）
}, this.interval);
}
};
timer.start(); // 正常输出1000（避免普通函数this指向window的坑）

正常回答（专业版）：

this 的指向由调用方式决定，核心规则有 4 种：

1. 全局 / 普通函数调用：非严格模式下指向全局对象（浏览器为 window），严格模式下为 undefined；
2. 对象方法调用：指向调用方法的对象（如obj.method()中的 this 为 obj）；
3. 构造函数调用：通过new关键字创建实例时，this 指向新生成的对象；
4. 箭头函数：没有独立的 this，直接继承外层作用域的 this（如所在函数或全局环境）。

大白话回答（接地气版）：

this 就像一个 “超级跟班”，它的归属由 “老板” 决定：

• 单独喊它干活（普通函数调用），它跟着全局老板（window）；
• 在对象里派活（对象方法），它只听当前对象老板的话；
• 用 new 创建对象时，它变成新对象的专属跟班；
• 箭头函数是 “懒人跟班”，直接复制外层老板的指向，自己不找新老板。

第二题：原型链 —— 对象的 “家族传承系统”

面试官提问：“解释原型和原型链的关系，如何通过原型实现继承？”

代码示例：用 “家族关系” 理解原型链

// 定义“父类”：交通工具（所有车的祖先）
function Vehicle() {
this.wheels = 4; // 父类共有属性：4个轮子
}
Vehicle.prototype.drive = function() { // 父类原型方法：驾驶
console.log('正在行驶...');
};
// 定义“子类”：汽车，继承交通工具
function Car(brand) {
Vehicle.call(this); // 继承父类属性（轮子数量）
this.brand = brand; // 子类独有属性：品牌
}
// 关键步骤：建立原型链（子类原型指向父类实例）
Car.prototype = new Vehicle();
Car.prototype.constructor = Car; // 修正构造函数指向（避免指向父类）
// 创建汽车实例
const bmw = new Car('BMW');
console.log(bmw.wheels); // 输出4（继承父类属性）
bmw.drive(); // 输出“正在行驶...”（调用父类原型方法）

正常回答（专业版）：

• 原型：每个函数都有prototype（显式原型），每个对象都有__proto__（隐式原型），指向构造函数的原型；
• 原型链：对象查找属性时，先查自身，再沿__proto__逐层向上查找，直到Object.prototype（终点是 null）；
• 原型继承：通过子类.prototype = new 父类()让子类原型指向父类实例，实现子类复用父类属性和方法，减少代码冗余。

大白话回答（接地气版）：

原型链就像对象的 “家族族谱”：

• 每个对象出生时，都会在自己的 “族谱”（__proto__）里记上 “爸爸” 的原型（比如汽车的爸爸是交通工具）；
• 找属性时先翻自己的 “口袋”，没有就按族谱找爸爸、爷爷…… 直到找到为止（比如汽车找drive方法，发现自己没有，就去交通工具的原型里找）；
• 继承就是让子类认父类当 “祖先”，这样子类就能用父类的 “祖传技能”（方法），不用自己重新学一遍。

第三题：async/await—— 异步编程的 “丝滑加速器”

面试官提问：“对比 Promise，说明 async/await 的优势及实际应用场景。”

代码示例：用 “快递流程” 理解异步处理

// 模拟异步获取用户订单（Promise版本）
function getOrder(userId) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(`用户${userId}的订单已获取`);
}, 1000);
});
}
// async/await版本：代码像同步流程一样清晰
async function processOrder() {
try {
console.log('开始处理订单...');
// 等待获取订单（模拟快递运输）
const order1 = await getOrder(1);
console.log(order1); // 输出“用户1的订单已获取”
// 继续处理下一个订单（模拟连续流程）
const order2 = await getOrder(2);
console.log(order2); // 输出“用户2的订单已获取”
} catch (error) {
console.error('订单处理失败：', error); // 统一错误处理
}
}
processOrder();

正常回答（专业版）：

async/await 是 Promise 的语法糖，核心优势：

1. 代码可读性强：用同步写法处理异步，避免回调嵌套（回调地狱），逻辑更直观；
2. 错误处理简化：通过try/catch统一捕获所有异步错误，无需每个then单独写catch；
3. 流程控制灵活：支持并行处理（Promise.all）和串行处理（多个await），适合复杂异步场景（如网络请求、文件读写）。

大白话回答（接地气版）：

async/await 就像给异步操作 “排好队”：

• 以前用 Promise 的then回调，多个异步操作像 “俄罗斯套娃” 一样层层嵌套，看得人眼花缭乱（比如先请求用户信息，再请求订单，再请求物流，代码缩进越来越深）；
• 现在用await，就像等快递一样，第一个快递到了（第一个异步完成），再处理第二个，代码一行一行执行，再也不用绕来绕去；
• 出错了也不用担心，一个try/catch就能把所有错误 “打包处理”，再也不用每个步骤都提心吊胆。

基础题太简单？面试官为啥一直问？

有人觉得 “this、原型链这些题太基础，工作中框架都帮解决了，面试问这些没啥用”；也有人认为 “基础不扎实，写代码时连框架报错都看不懂，比如 this 指向错误能折腾半天”。你觉得面试频繁考基础题是 “套路” 还是 “必要”？工作中有没有因为基础薄弱踩过坑？ 来评论区聊聊，看看多少人有同感！

面试成功的关键，在于把基础题答出 “花”—— 不仅要知道是什么，还要说清为什么和怎么用。今天的 3 道题有没有让你豁然开朗？觉得有用的话，点赞关注走一波，后续还有更多 “面试必坑题” 解析，帮你把每个知识点嚼碎吃透！你最想了解哪道 JS 面试题？评论区留言，咱们下期重点拆解～