当前位置：首页 > news >正文

用美食来理解JavaScript面向对象编程

news 2026/7/10 20:05:06

欢迎使用我的小程序👇👇👇👇 俱好用助手功能介绍

大家好！今天我们要聊一个听起来有点“高大上”的话题——JavaScript面向对象编程（OOP）。别担心，我不会用一堆专业术语砸晕你，而是要用做美食的方式来解释这个概念！

厨房里的“对象思维”

想象一下，你是一位厨师，要制作一批美味的杯子蛋糕。在面向对象的世界里：

类（Class）= 你的杯子蛋糕食谱
对象（Object）= 按照食谱做出来的一个个杯子蛋糕
属性（Property）= 蛋糕的特征（颜色、口味、尺寸）
方法（Method）= 蛋糕能做的事（被吃掉、被装饰）

第一步：创建你的“食谱”（类）

在JavaScript中，我们有几种方式创建“食谱”：

传统方式 - 构造函数

// 杯子蛋糕“食谱”functionCupcake(flavor,color,topping){// 这些是蛋糕的属性this.flavor=flavor;// 口味this.color=color;// 颜色this.topping=topping;// toppingsthis.isEaten=false;// 是否被吃了// 这是蛋糕能做的事（方法）this.eat=function(){this.isEaten=true;return`美味的${this.flavor}口味杯子蛋糕被吃掉了！`;};this.describe=function(){return`这是一个${this.color}色的${this.flavor}口味杯子蛋糕，上面有${this.topping}。`;};}// 按照食谱制作蛋糕（创建对象）constmyCupcake=newCupcake("巧克力","棕色","彩虹糖");console.log(myCupcake.describe());// 输出描述console.log(myCupcake.eat());// 吃掉它

现代方式 - ES6类语法

ES6给了我们更直观的写法：

classCupcake{constructor(flavor,color,topping){this.flavor=flavor;this.color=color;this.topping=topping;this.isEaten=false;}eat(){this.isEaten=true;return`美味的${this.flavor}口味杯子蛋糕被吃掉了！`;}describe(){return`这是一个${this.color}色的${this.flavor}口味杯子蛋糕，上面有${this.topping}。`;}}// 使用方式一样constbirthdayCupcake=newCupcake("香草","粉色","生日蜡烛");

第二步：继承 - 美食界的“家族秘方”

假设现在你想做一种特殊杯子蛋糕——生日杯子蛋糕。它具备普通杯子蛋糕的所有特性，但还有一些额外功能：

classBirthdayCupcakeextendsCupcake{constructor(flavor,color,topping,age){super(flavor,color,topping);// 调用父类的构造方法this.age=age;// 新增属性this.candleLit=false;// 新增属性}// 新增方法lightCandle(){this.candleLit=true;return`为${this.age}岁生日点亮了蜡烛！`;}// 重写父类方法describe(){return`${super.describe()}这是为${this.age}岁生日特别制作的！`;}}// 试试看constmyBirthdayCake=newBirthdayCupcake("草莓","红色","奶油花",8);console.log(myBirthdayCake.describe());// 调用重写后的方法console.log(myBirthdayCake.lightCandle());// 调用新方法console.log(myBirthdayCake.eat());// 继承自父类的方法

第三步：封装 - 像包装食品一样保护数据

好的包装既能展示食物，又能保护它。在OOP中，我们通过封装来控制对对象内部状态的访问：

classSecretRecipeCupcake{constructor(secretIngredient){letsecret=secretIngredient;// 私有变量，外部无法直接访问// 公开的方法可以访问私有变量this.getHint=function(){return`秘方里有一种让蛋糕格外松软的${secret.slice(0,3)}...成分`;};this.setSecret=function(newSecret){// 可以在这里添加验证逻辑if(newSecret.length>2){secret=newSecret;return"秘方更新成功！";}return"秘方太短，无效！";};}}constmysteryCake=newSecretRecipeCupcake("魔法酵母");console.log(mysteryCake.secret);// undefined - 无法直接访问console.log(mysteryCake.getHint());// 通过公开方法获取提示

第四步：多态 - 同一个动作，不同的表现

多态就像不同的厨具都能“处理食材”，但方式不同：

classOven{bake(item){returnitem.bake();}}classCupcake{bake(){return"杯子蛋糕在350°F下烘焙20分钟";}}classBread{bake(){return"面包在400°F下烘焙40分钟";}}constmyOven=newOven();constcupcake=newCupcake();constbread=newBread();console.log(myOven.bake(cupcake));// 不同的对象，相同的方法名，不同的实现console.log(myOven.bake(bread));

现实世界例子：一个简单的购物车

让我们用OOP思想构建一个购物车系统：

classProduct{constructor(name,price){this.name=name;this.price=price;}getInfo(){return`${this.name}- ¥${this.price}`;}}classShoppingCart{constructor(){this.items=[];}addItem(product,quantity=1){this.items.push({product,quantity});console.log(`已将${quantity}个${product.name}加入购物车`);}calculateTotal(){returnthis.items.reduce((total,item)=>{returntotal+(item.product.price*item.quantity);},0);}checkout(){consttotal=this.calculateTotal();console.log(`总计：¥${total}`);console.log("感谢购买！");this.items=[];// 清空购物车}}// 使用购物车constcart=newShoppingCart();constapple=newProduct("苹果",5);constmilk=newProduct("牛奶",20);cart.addItem(apple,3);cart.addItem(milk,2);cart.calculateTotal();cart.checkout();