《彭老板送花被小美说"gun~~"?JS代理模式让闺蜜3秒上演"暗度陈仓"名场面》

250 阅读4分钟

引言

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个面向对象的高级知识点:

  1. 接口抽象:小红和小美都实现了receiveFlower方法(相同接口),因此可以互换使用(彭奕淳不需要知道接收者是小美还是小红)
  2. 代理模式:小红作为"代理对象",在不改变小美原有逻辑的前提下,增加了"延迟修改心动值"的额外操作(符合设计模式的"开闭原则")
  3. 异步编程:通过setTimeout实现延迟操作,体现了JS处理异步任务的典型方式

四、运行结果:看对象如何"暗度陈仓"

执行pyc.sendFlower(xh)后,控制台会依次输出:

彭奕淳送花给小红99朵玫瑰花
(3秒后...)
小美接受了花并说"硕果走一波"

整个过程中,彭奕淳只需要调用sendFlower方法,无需关心接收者是小美还是小红——这就是面向对象设计的魅力:通过接口隔离复杂度,让对象协作更灵活


五、JS面向对象的"底层逻辑"

回到笔记中的核心概念,这段代码完美印证了JS的特性:

  • 弱类型xhxm无需声明类型,只要有receiveFlower方法即可被调用(鸭子类型:"像鸭子一样走路,就是鸭子")
  • 脚本语言特性:无需编译,直接通过node 1.js运行(对比C++的.cpp→.o→执行文件流程,JS更轻量)
  • 面向对象思想:用"属性描述对象状态,方法描述对象行为",将现实中的"送花-接收"场景完整映射到代码世界

结语

从"黄新天的基本信息"到"彭奕淳的送花策略",再到"小红的代理操作",这段JS代码用最贴近生活的案例,展示了面向对象编程的核心价值:用代码模拟现实,用设计模式优化协作

下次遇到需要"间接操作对象"的场景时,不妨试试代理模式——它不仅能让代码更优雅,还能让你更深刻地理解"面向接口编程"的魅力。