前端面试每日三题

前端面试每日三题 - Day 10

news2025/4/22 5:13:27

这是我为准备前端/全栈开发工程师面试整理的第十天每日三题练习，涵盖：

JavaScript 中 this 的指向详解与常见陷阱
Vue 生命周期钩子的执行顺序与场景实践（Vue2 vs Vue3）
系统设计实战：内容推荐系统的核心架构设计

✅ 题目 1：JavaScript 中 this 的指向详解与常见陷阱

📘 解析：

this 是 JavaScript 中最容易误解的机制之一，它的指向取决于函数的调用方式，而不是定义方式。

📌 常见场景：

普通函数调用：

function sayName() {
  console.log(this.name);
}

const name = 'Global';
sayName(); // this -> window（严格模式下为 undefined）

对象方法调用：

const user = {
  name: 'Alice',
  sayName() {
    console.log(this.name);
  }
};
user.sayName(); // this -> user

构造函数调用：

function Person(name) {
  this.name = name;
}
const p = new Person('Tom'); // this -> 实例对象 p

箭头函数：不绑定自己的 this，继承外层作用域的 this

const obj = {
  name: 'Arrow',
  sayName: () => {
    console.log(this.name);
  }
};
obj.sayName(); // undefined（this -> window）

手动绑定：call、apply、bind

function show() {
  console.log(this.name);
}
const user = { name: 'Bob' };
show.call(user); // Bob

🧠 记忆脑图建议：

this 绑定优先级图谱：new > bind > call/apply > 对象方法 > 全局
场景联想 + 函数调用方式分类

✅ 题目 2：Vue 生命周期钩子的执行顺序与场景实践（Vue2 vs Vue3）

📘 解析：

Vue 生命周期是组件开发的核心。Vue 2 和 Vue 3 的生命周期略有差异，Vue 3 引入了 Composition API 和 setup()，更适合逻辑复用。

📌 Vue 2 生命周期钩子：

beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed

export default {
  data() {
    return { msg: "hello" };
  },
  created() {
    console.log("created");
  },
  mounted() {
    console.log("mounted");
  },
  destroyed() {
    console.log("destroyed");
  }
};

📌 Vue 3 生命周期对比：

Vue 3 使用 Composition API：

import { onMounted, onUpdated, onUnmounted } from "vue";

export default {
  setup() {
    onMounted(() => {
      console.log("mounted");
    });

    onUpdated(() => {
      console.log("updated");
    });

    onUnmounted(() => {
      console.log("unmounted");
    });
  }
}

生命周期阶段	Vue 2 Options API	Vue 3 Composition API
创建阶段	created	setup()
挂载阶段	mounted	onMounted
更新阶段	updated	onUpdated
销毁阶段	destroyed	onUnmounted

🔍 使用场景实践：

数据初始化：created/setup
DOM 依赖操作：mounted/onMounted
清理定时器或监听器：beforeDestroy/destroyed 或 onUnmounted

🧠 记忆脑图建议：

对比图 + 适用场景
生命周期流程图，标注 Composition API 对应钩子

✅ 题目 3：系统设计-内容推荐系统的核心架构设计

📘 解析：

内容推荐系统广泛用于新闻、视频、短内容类产品，核心目标是“个性化”和“实时性”。

🔧 架构核心模块：

用户行为采集层：
- 点击、浏览、点赞、分享、停留时间
- 使用前端埋点系统或 SDK 上传
日志流处理层（实时处理）：
- Kafka/Flume -> Spark/Flink 实时计算
- 构建用户画像、行为标签、热度指标
推荐引擎服务层：
- 协同过滤算法（基于用户/内容相似性）
- 内容召回 + 精排模型（CTR、深度学习模型）
- AB 测试平台支持多策略灰度上线
缓存与接口服务层：
- Redis 存储用户推荐结果
- Node.js/Go 实现高性能接口（GraphQL/REST）
前端展示层：
- 按模块展示推荐内容（新闻流/短视频流）
- 滚动加载、懒加载、智能曝光统计

示例：推荐结果缓存接口（Node.js）

app.get('/api/recommend', async (req, res) => {
  const userId = req.query.userId;
  const cached = await redis.get(`recommend:${userId}`);
  if (cached) return res.send(JSON.parse(cached));

  const result = await recommendService.getForUser(userId);
  await redis.set(`recommend:${userId}`, JSON.stringify(result), 'EX', 60);
  res.send(result);
});

🧠 记忆脑图建议：

推荐系统五层架构图
算法策略流程图 + 示例

🧾 今日总结

题目	涉及知识点	关键收获
this 指向机制	JavaScript	掌握不同调用方式下 this 的指向与绑定规则
Vue 生命周期对比	Vue2 vs Vue3	掌握生命周期钩子变化，结合场景实践
内容推荐系统设计	系统设计	理解推荐架构的五大模块及前端接口优化