清晨的雾气渐渐散去，阳光透过纱窗洒在桌前，泡一杯温热的蜂蜜水，让我们在这宁静的氛围里，以轻松的节奏聊聊两道 JavaScript 高频面试题。就像在晨光中散步，不急不躁地探索知识，让学习成为一种治愈的享受。

第一题：JavaScript 中的 this 指向规则

面试官常问：“说说 JavaScript 中 this 的绑定机制，不同场景下的指向有什么区别？”别被 this 的 “多变” 困扰，它其实就像一个 “动态标签”，贴在谁身上就指向谁。记住口诀：调用方式决定指向，箭头函数除外（它永远继承外层 this）。

// 场景1：全局作用域中的this（浏览器环境指向window）
console.log(this); // 输出Window对象（浏览器中）
// 场景2：普通函数调用，this指向调用者
function sayHi() {
console.log(this); // 非严格模式指向window，严格模式下为undefined
}
sayHi(); // 直接调用，调用者是window
// 场景3：对象方法中的this指向当前对象
const user = {
name: '前端小安',
greet() {
console.log(`你好，我是${this.name}`); // this指向user对象
}
};
user.greet(); // 输出：你好，我是前端小安
// 场景4：构造函数中的this指向新实例
function Book(title) {
this.title = title; // this指向新创建的Book实例
}
const novel = new Book('JavaScript进阶');
console.log(novel.title); // 输出：JavaScript进阶
// 场景5：箭头函数的this继承外层作用域
const outer = () => {
const name = '外层';
const inner = () => {
console.log(this.name); // this指向外层作用域的this（如全局window）
console.log(name); // 正常访问外层变量
};
inner();
};
outer();

关键点：普通函数的 this 在调用时确定，箭头函数的 this 在定义时继承外层。实际开发中，对象方法、事件回调、定时器等场景需特别注意 this 的指向问题。

第二题：数组方法大比拼 ——map、forEach、filter 的区别

“说说 map、forEach、filter 的作用和区别，什么场景下选择哪种方法？”这三个方法就像数组的 “得力助手”，各有专长：

• map：擅长 “加工转换”，返回新数组（原数组长度不变）；
• forEach：专注 “遍历执行”，没有返回值（适合单纯执行操作）；
• filter：负责 “筛选过滤”，返回符合条件的新数组。

// 原始数组
const numbers = [1, 2, 3, 4];
// map：将每个元素乘以2，生成新数组
const doubled = numbers.map(num => num * 2);
console.log(doubled); // 输出：[2, 4, 6, 8]
// forEach：遍历数组并打印元素
numbers.forEach(num => {
console.log(`当前元素：${num}`);
});
// 输出：
// 当前元素：1
// 当前元素：2
// 当前元素：3
// 当前元素：4
// filter：筛选出偶数元素
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // 输出：[2, 4]

场景建议：

• 需要转换数据结构时用map（如接口数据处理）；
• 只需遍历执行回调（如日志打印、DOM 更新）用forEach；
• 需要筛选符合条件的元素时用filter（如搜索过滤）。

面试应答模板

this 指向问题回答

“this 的指向取决于调用方式：

1. 全局环境中，浏览器里 this 指向 window，Node.js 里指向 global；
2. 普通函数直接调用时，非严格模式下指向 window，严格模式下是 undefined；
3. 对象方法调用时，this 指向当前对象，比如obj.fn()里的 this 就是 obj；
4. 构造函数用 new 调用时，this 指向新创建的实例；
5. 箭头函数没有自己的 this，会继承外层作用域的 this，比如在对象方法里用箭头函数，this 可能指向全局，这点需要特别注意。”

数组方法区别回答

“map、forEach、filter 都是数组常用方法，但作用不同：

• map 返回一个新数组，每个元素是原数组元素调用回调后的结果，适合数据转换，比如把数组里的字符串转成数字；
• forEach 没有返回值，主要用来遍历数组并执行操作，比如给每个元素打印日志，或者操作 DOM；
• filter 返回一个新数组，包含所有通过回调判断的元素，适合筛选数据，比如从列表里找出符合条件的项。实际用的时候，根据是否需要返回值、是转换还是筛选来选择，比如想生成新数组就用 map 或 filter，单纯遍历就用 forEach。”

晨光互动

今天的两道题有没有让你对 JS 基础有了新的理解？你平时在开发中遇到过哪些关于 this 或数组方法的 “坑”？欢迎在评论区分享你的经验或疑问～

觉得文章轻松又实用的话，别忘了点击 “点赞” 和 “关注”，每天清晨和上午，我们都会用一杯茶的时间，陪你解锁一个面试小知识，让学习成为一天中最治愈的开始！