今天我们用一个超有趣的恋爱故事来带你学 JavaScript！🚀
男主角出场啦——让我们欢迎小彭！🎉
看他如何通过 JS 学会送花和用代理模式追女孩！❤️
📌 小彭的基本资料
const xp = {
name: '小彭', // 名字
age: 21, // 年龄
hometown: '新余', // 家乡
isSingle: true, // 单身状态
}
🔍 这段代码教我们：
1️⃣ JS 是弱类型语言，变量类型由值决定。
2️⃣xp代表小彭，他的属性就像是一个对象的一部分。
3️⃣ 用{}创建对象，灵活又方便！🎯
💐 小彭的一见钟情：送花给小美
小彭看上了一个小姐姐——小美！❤️
于是，他决定送花来表白！🌹
const xm = {
name: '小美',
room: '408',
}
小彭想：送花总不可能直接送给小美吧？
他想到了一个聪明的办法——通过小红！😉
🔄 通过小红代理送花：充满戏剧性
小彭送花给小红，然后让小红再转交给小美！这样可以避免尴尬，还能增添悬念！😏
const xh = {
name: '小红',
room: '408',
hometown: '新余', // 老乡，知根知底！ 😜
receiveFlower: function(sender) {
setTimeout(() => {
xm.xq = 99; // 小美心情变好了！
xm.receiveFlower(sender); // 小红把花转交给小美
}, 3000);
}
}
🌹 小美的反应：心情好坏影响结果
如果小美心情好，肯定是大赏！😎
如果心情不好，收到的就只有一个“gun”~🚪
const xm = {
xq: 30, // 心情
name: '小美',
room: '408',
receiveFlower: function(sender) {
console.log(`${this.name} 收到了 ${sender.name} 的99朵玫瑰`);
if (xm.xq > 90) {
console.log('商场走一波');
} else {
console.log('gun ~~~');
}
}
}
🤔 当小红喜欢上小彭？
假设小红喜欢小彭，结果又会变得不一样！💔
她的反应可能会是这样：
receiveFlower: function(sender) {
if (sender.name === '小彭') {
console.log('彭哥哥，让我们在一起吧');
return;
}
}
有了这种可能性，故事一下子变得更复杂了！🎭
💻 如何运行这个 JavaScript 小剧场
- 在
js文件夹里创建一个flower文件夹，在flower文件夹下创建1.js，把上面的代码输入进去。 - 再创建一个
index.html文件，来加载1.js。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./1.js"></script>
</body>
</html>
- 确保已下载
Live Server插件，右键点击index.html选择“在 Live Server 中打开”！🚀
4. 在打开的浏览器中右击选择检查，选择
console，看效果！😏
🔑 JavaScript 特性总结
1️⃣ 弱类型 & 动态特性：变量类型可以随时变化！
let xp = 21;
xp = '小彭'; // 动态转换类型
2️⃣ 面向对象编程：通过对象来模拟现实世界的行为！
const xiaopeng = {
name: '小彭',
age: 21,
sendFlower: function(target) {
console.log(`${this.name} 准备送花给 ${target.name}`);
target.receiveFlower(this);
}
};
3️⃣ 代理模式：小红作为代理帮小彭送花，让小美无法拒绝！
const xiaohong = {
name: '小红',
receiveFlower: function(sender) {
console.log(`${this.name} 代收来自 ${sender.name} 的花`);
if (this.checkMood()) {
xiaomei.receiveFlower(sender);
}
},
checkMood: function() {
return Math.random() > 0.3; // 70%几率转交
}
};
📝 总结：代理模式的优势
1️⃣ 间接访问：通过代理对象控制对目标对象的访问。
2️⃣ 功能扩展：可以在不改变目标对象代码的情况下增加功能。
3️⃣ 接口一致性：代理与目标对象实现相同接口，可互换使用。
4️⃣ 职责分离：核心功能和辅助功能分开，代码更整洁。
💡 通过这个生动的故事，我们看到了 JavaScript 面向对象的强大魅力，同时也理解了代理设计模式如何应用在实际开发中！ 😍
