从零开始:小白进阶指南——掌握腾讯级别的JS语法规范,实现面向对象追到心仪女神!!!

前言

我们虽是小白,却也有着一颗冲击百度,字节,腾讯等等大厂的强烈心脏。那就让我们来聊一聊今天的核心面向对象的 代理模式 Proxy !作为面向对象设计模式的一种,可以通过接口让对象之间互换使用,从而达到某些复杂目的,这便是代理模式的简单解释。

简介

长安认为现在我们小白们有必要提前了解一下什么是面向对象?其实简单来说在面向对象编程中,对象是指具有状态(属性)和行为(方法)的实体。然而JavaScript则是表现力最强的一种。

正文

回归正题,长安今天就用自己追求女神之路的历程跟着大家一起探索一番面向对象模式!

const 复制代码
            name: '长安',//字符串类型
            age: 20,//数值类型
            hometown: '抚州',
            girlfriend: null,//null 空
            city: undefined,//未定义
            hobbies: ['刷剧', '小说'],// 数组也是对象
            isSingle: true,//布尔值
            

哈哈,请看此处,这是长安的个人简介哦。其中的属性值长安也有在标注哦,小伙伴们可以了解一下的。

const 复制代码
            { name: '小美',
            xq: 20,
            hometown: '丰城',       
    }  

没错,这是小美,长安在校园里的某处遇见了,一见钟情的成为了长安的女神。

const 复制代码
            name: '小红',
            hometown: '抚州',
            //实现了和小美一样的接口,就可以互换
            receiverFlower: function (sender) {
                console.log('收到' + sender.name + '鲜花');
                //if (sender.name === '艾安盛'){
                console.log('啊,让我们在一起吧....');
                //}
                setTimeout(function () {
                    xm.xq = 99;
                    xm.receiverFlower(sender);
                }, 2000)
            }
        }

大家请仔细看看,长安要想追到女神,得需要送花来表达自己的爱意吧。可是害羞的长安不好意思亲自送给小美,结果找到了她的闺蜜小红,委托于她。

receiver作为函数的形参,这里应该传入一个对象进去,因为收花的人是对象,例如:ca.sendFlower(xm)

const 复制代码
            name: '小美',
            xq: 20,
            hometown: '丰城',
            receiverFlower: function (sender) {
                console.log(this.name + '收到' + sender.name + '鲜花');
                if (this.xq < 80) {
                    console.log('我想你还是算了吧');
                } else {
                    console.log('万达走一波');
                }
            }
        }

但是,大家也知道追女生容易被拒绝,何况还是女神级别的人物。这里我们注意xm.emotion,也就是小美的心情,当xm.emotion >= 80,小美才会收下长安的花,并与之谈恋爱。但长安怕被小美直接拒绝,这样很掉面子。这时候,长安想到了一个办法,先把花交给小美的室友,室友可以观察小美的心情,在心情好的时候转送给下课。在这里的时候我们的思路就打开了,我们可以通过小美的室友间接去访问小美。

代理模式

const 复制代码
            name: '小红',
            hometown: '抚州',
            //实现了和小美一样的接口,就可以互换
            receiverFlower: function (sender) {
                console.log('收到' + sender.name + '鲜花');
                //if (sender.name === '艾安盛'){
                console.log('啊,让我们在一起吧....');
                //}
                setTimeout(function () {
                    xm.xq = 99;
                    xm.receiverFlower(sender);
                }, 2000)
            }
        }

所以说代理模式这里我们定义xh这个对象,她是小美的室友小红,她跟小美有同样的方法,当长安将花送给小红时,小红会观察小美的心情,当xk.emotion >= 80 时,将花转交给小美,这样长安跟小美就可以在一起了!

而长安先将花给小红,小红在将花转交给小美,我们称之为代理模式,实现了通过代理对象控制对真实对象的访问。

最后

实现同样方法的对象(实现同样的接口),就可以互换使用,代理模式。

面向对象的编程->面向接口的编程

这就是长安的追求历程了,小伙伴们还有什么高招吗?

相关推荐
福兮说4 分钟前
URL 编码的七个坑:c++ 传到后端变空格、%25 套娃、截断 emoji 直接报错
开发语言·前端·javascript·node.js·url
小的时候可菜了27 分钟前
JS 异步的本质:从单线程到 thenable(一条进化链)
开发语言·前端·javascript
可乐鸡翅yeah_35 分钟前
hls.js 配置 loadStartPosition,点播起始播放位置踩坑
开发语言·javascript·网络协议·ecmascript·m3u8在线
web打印社区1 小时前
Windows 网页静默打印设置步骤:客户端、防火墙与联调清单
开发语言·前端·javascript·chrome·pdf·ecmascript
web打印社区2 小时前
JS 静默打印怎么做:纯前端为什么不行,以及最小可跑通写法
开发语言·前端·javascript·websocket·网络协议·http·pdf
web打印社区2 小时前
HTML5 静默打印:前端页面怎么调用打印机且尽量不弹窗
前端·javascript·vue.js·pdf·html·html5
liangshanbo12153 小时前
React Fiber:从“解决卡顿”到完整更新链路
前端·javascript·react.js
铅笔小新z4 小时前
【stm32】理解弱引用
javascript·stm32·嵌入式硬件
凤城老人4 小时前
从PyQt6到Electron:一款英语字帖生成器的跨平台重构实战与踩坑全记录
javascript·重构·electron
星栈16 小时前
pnpm 12 升级实测
前端·javascript