前端知识点---面向对象与面向过程(javascript)

✅ 面向过程 vs 面向对象 对比

🌰 举个例子
面向过程写一个学生考试分数系统：

let name = "张三";
let score = 90;
function printScore(name, score) {
  console.log(name + " 的成绩是：" + score);
}
printScore(name, score);

面向对象的写法：

class Student {
  constructor(name, score) {
    this.name = name;
    this.score = score;
  }

  printScore() {
    console.log(this.name + " 的成绩是：" + this.score);
  }
}

let stu = new Student("张三", 90);
stu.printScore();

📌 总结口诀：
面向过程是“做事的人”，
面向对象是“谁来做事”。

用的**“点外卖”**的生活场景，来对比一下面向过程和面向对象。

🍔 点外卖：面向过程 vs 面向对象
✅ 面向过程的思维（步骤导向）：
你会这么想：

打开外卖App

找餐厅

看菜单

选菜

下单

等送餐

吃饭

对应成代码就是一堆步骤函数：

function openApp() {}
function findRestaurant() {}
function chooseMenu() {}
function placeOrder() {}
function waitForDelivery() {}
function eat() {}

openApp();
findRestaurant();
chooseMenu();
placeOrder();
waitForDelivery();
eat();

🔍 特点： 一步一步执行，流程清晰，但每次都要重复这些操作逻辑，不好复用。

🔸 面向对象的思维（角色导向）：
你会这样思考：
“我（用户）要点外卖”，
“外卖员要送餐”，
“餐厅要出餐”
—— 每个对象有自己的职责和行为。

class User {
  order(food) {
    console.log("下单：" + food);
  }
}

class DeliveryPerson {
  deliver() {
    console.log("配送中...");
  }
}

class Restaurant {
  cook(food) {
    console.log("正在制作：" + food);
  }
}

let user = new User();
let deliveryGuy = new DeliveryPerson();
let shop = new Restaurant();

user.order("汉堡");
shop.cook("汉堡");
deliveryGuy.deliver();

🔍 特点： 用“对象”组织代码，行为清晰，职责分明，系统更好维护和扩展。

🧠 总结一句话：
面向过程强调“怎么做”，面向对象强调“谁来做”。

✅ 面向对象：就是**把任务分配给具体的人（类和对象）**去做，每个人有自己的职责，谁该做什么很清楚。

✅ 面向过程：就是一步一步地把事情做完，用函数一步步完成任务，重点在“流程”和“怎么做”。

再简化一下：

面向对象：谁来做（分工）
面向过程：怎么做（流程）

举个比喻：

🧱 造房子

面向过程：你一个人从设计、搬砖、砌墙、刷漆全都亲力亲为。

面向对象：你把任务分给设计师、工人、监理，每个人各司其职。