js对象设计模式：实例分析dolphin求爱最终是否成功?

前言

今天我们来聊一聊js的设计模式，当然我这里是以对象为例。为了方便理解，我们这里举一个海豚先生追求grace女士的案例。

详解

首先我们来看下对象的声明实例

arduino 复制代码

const dolphin = {
    name: '海豚',
    age: 20,
    city: '九江'
}

const grace = {
    name: 'grace',
    age: 19,
    city: '九江'
}

console.log(dolphin,grace)

这里的const声明其实和var,let是一类的，const也是es6新出的类型，const定义后的常量不可修改，有点像C语言的define 一样。然后就是对象的结构，用key value来进行存储，也就是键值对的方式。这里可以看出这两个对象是两个人，然后我们想实现一个功能，就是让海豚先生追求grace女士。

海豚先生和grace女士我们都已经创建了，现在就是少了追求二字，追一个女生我们可以选择送一捧花，因此海豚先生需要有送花的动作，而grace女士需要有收花的动作，下面我们加入这些动作receive 和send

javascript 复制代码

const dolphin = {
            name: '海豚',
            age: 20,
            city: '九江',
            sendFlower: function(receiver){
                receiver.receiveFlower(this);
            }
        }

        const grace = {
            name: 'grace',
            age: 19,
            city: '九江',
            receiveFlower: function(sender){
                console.log(this.name+'收到'+sender.name+'花了')
            }
        }

你没看错，对象里面也是可以有函数的，这样写的函数叫做匿名函数，其实:function可以省去不写。男方动作的形参是填入送出的对象，也就是接收者，里面需要调用到对方的接收动作，也就是receiveFlower，当然这个动作也需要有一个形参，也就是送出者。大家可能会好奇this是干嘛的，其实this就是引用当前的对象，如果要具体的所以key，那就直接this.key既可，比如this.name就是当前对象的名字。

这里插一嘴，会不会有初学者好奇我这些代码怎么运行的，这是js代码，放在html里面，运行网页的时候右键检查点击控制台输入指令即可。

已经实现了送花收花这一功能，但是事实上我们想让grace收花没有这么简单，我们可能需要认识她的闺蜜，让她的闺蜜转送花给grace，直接送可能太直接了，grace不会接收，因此我们需要引入grace的闺蜜，并赋予她收花的动作。下面我们新加入闺蜜这个人物。

javascript 复制代码

const graceBestFriend = {
            name: 'larry',
            age: 19,
            city: '九江',
            receiveFlower: function(sender){
                grace.receiveFlower(sender);
            }
        }

闺蜜Larry的动作，一定是将花送到grace身上，所以她的动作的里面的对象一定是调用到grace的收花动作。我们为什么一定要找Larry帮忙呢，就是因为闺蜜Larry是最懂grace的人，grace可能会有心情变化，闺蜜知道什么时候grace心情变好再去送花，办事非常稳妥。于是我们给代码也是实现这一动能。

javascript 复制代码

const dolphin = {
            name: '海豚',
            age: 20,
            city: '九江',
            sendFlower: function(receiver){
                receiver.receiveFlower(this);
            }
        }

        const graceBestFriend = {
            name: 'larry',
            age: 19,
            city: '九江',
            receiveFlower: function(sender){
                
                if(grace.emotion >= 80){
                    grace.receiveFlower(sender);
                }else{
                    setTimeout(function(){
                        grace.emotion = 99
                        grace.receiveFlower(sender)
                    },2000)
                }
            }
        }

        const grace = {
            name: 'grace',
            age: 19,
            city: '九江',
            emotion: 50,
            receiveFlower: function(sender){
                
                console.log(this.name+'收到'+sender.name+'花了')
                if(this.emotion < 80){
                    console.log('不行，我不接受')
                }else{
                    console.log('肘，跟我进屋')
                }

            }
        }

grace的心情属性太低了哪怕收到花了也不会同意跟你去约会，所以懂她的Larry知道grace过了2秒，grace的心情会变好，这才能去执行让grace收花这一动作。过两秒执行某个动作需要用上计时器setTimeOut(value1,value2)这个函数第一个参数是执行的动作，第二个参数是时间，单位是毫秒，1s等于1000ms

就这样，我们通过海豚先生追求grace女士这一生活实例用代码给实现了，这里用的都是对象这一知识点。

总结

我们再对对象进行一个总结，我们的js可以面向对象编程，所谓面向对象就是 码商 + 情商。对象是由属性key和方法（）构成的，方法就是一个动作，如果大家学过UML就清楚这一概念了。当另外的对象想要实现其中一个对象的方法的时候我们可以直接去互换使用，相当于java里的interface接口，进行代理模式。