引言
JavaScript作为一门弱类型、动态灵活的脚本语言,总能用最贴近现实的方式描述世界。今天我们通过一个"彭奕淳送花给小美"的生活场景,聊聊JS面向对象编程的核心思想,以及如何用"代理模式"实现更优雅的对象交互。
一、用JS对象描述现实:从"黄新天"说起
在JS中,"对象"是描述现实事物的最佳载体。比如我们要介绍"黄新天",不需要复杂的类定义,用对象字面量就能快速创建:
const hxt = {
name: '黄新天',
age: 20,
tall: 187,
hometown: '山东',
isSingle: true,
sex: '男',
};
这段代码完美诠释了JS的灵活:
- 弱类型:变量类型由值决定(name是字符串,age是数值)
- 动态特性:无需
new操作符,用{}直接创建对象(区别于Java/C++的类实例化) - 面向对象基础:对象包含"属性"(描述特征,如name/age)和潜在的"方法"(行为,如后续的sendFlower)
二、送花场景:对象的方法与交互
我们的核心故事围绕"彭奕淳送花"展开。先看关键对象定义:
// 彭奕淳对象(送花者)
const pyc = {
name: '彭奕淳',
sendFlower: function(girl) {
console.log(`${this.name}送花给${girl.name}99朵玫瑰花`);
girl.receiveFlower(this); // 调用接收者的方法
}
};
// 小美对象(目标接收者)
const xm = {
name: '小美',
xq: 30, // 心动值
receiveFlower: function(sender) {
if (this.xq > 90) {
console.log('小美接受了花并说"硕果走一波"');
} else {
console.log('小美拒绝了花并说"gun~~"');
}
}
};
这里体现了面向对象的核心:对象通过方法交互。彭奕淳的sendFlower方法不仅完成"送花"动作,还调用了接收者的receiveFlower方法,形成对象间的行为协作。
三、代理模式:让闺蜜小红成为"中间桥梁"
现实中,直接送花可能会被拒绝。这时候"闺蜜小红"登场了——她作为小美代理,实现相同的receiveFlower接口,但内部逻辑更复杂:
// 小红对象(小美闺蜜/代理)
const xh = {
name: '小红',
hometown: '新余', // 与彭奕淳同乡
receiveFlower: function(sender) {
// 3秒后悄悄提升小美的心动值
setTimeout(() => {
xm.xq = 99;
xm.receiveFlower(sender); // 最终触发小美接收
}, 3000);
}
};
// 实际调用:彭奕淳送花给小红(代理)
pyc.sendFlower(xh);
这里藏着3个面向对象的高级知识点:
- 接口抽象:小红和小美都实现了
receiveFlower方法(相同接口),因此可以互换使用(彭奕淳不需要知道接收者是小美还是小红) - 代理模式:小红作为"代理对象",在不改变小美原有逻辑的前提下,增加了"延迟修改心动值"的额外操作(符合设计模式的"开闭原则")
- 异步编程:通过
setTimeout实现延迟操作,体现了JS处理异步任务的典型方式
四、运行结果:看对象如何"暗度陈仓"
执行pyc.sendFlower(xh)后,控制台会依次输出:
彭奕淳送花给小红99朵玫瑰花
(3秒后...)
小美接受了花并说"硕果走一波"
整个过程中,彭奕淳只需要调用sendFlower方法,无需关心接收者是小美还是小红——这就是面向对象设计的魅力:通过接口隔离复杂度,让对象协作更灵活。
五、JS面向对象的"底层逻辑"
回到笔记中的核心概念,这段代码完美印证了JS的特性:
- 弱类型:
xh和xm无需声明类型,只要有receiveFlower方法即可被调用(鸭子类型:"像鸭子一样走路,就是鸭子") - 脚本语言特性:无需编译,直接通过
node 1.js运行(对比C++的.cpp→.o→执行文件流程,JS更轻量) - 面向对象思想:用"属性描述对象状态,方法描述对象行为",将现实中的"送花-接收"场景完整映射到代码世界
结语
从"黄新天的基本信息"到"彭奕淳的送花策略",再到"小红的代理操作",这段JS代码用最贴近生活的案例,展示了面向对象编程的核心价值:用代码模拟现实,用设计模式优化协作。
下次遇到需要"间接操作对象"的场景时,不妨试试代理模式——它不仅能让代码更优雅,还能让你更深刻地理解"面向接口编程"的魅力。