一年的工程师不怎么学，3年+ 的工程师一定要学的，大项目宝典。

前言：

设计模式是leetcode之外，顶级大厂代码能力的测试题。JavaScript设计模式为你提供了一种结构化的、可重复的方法来解决JavaScript开发中经常出现的问题。

今天我们来聊聊设计模式中的代理模式。我会使用通俗易懂的语言与生动有趣的例子，附上代码，带大家了解这一种设计模式~

正文:

在讲设计模式之前呢，先带着大家了解一种复杂的数据类型：对象。

对象

Javascript有着强大的表现力，而对象是Javascript的语言精粹。

对象的本质是属性 + 方法。对象也是一个变量，但对象可以包含多个值（多个变量），每个值以 name:value 对呈现。现在我们举出一个例子，来让大家了解对象。

js 复制代码

const xjun = {
            name: '小菌', // key value  姓名
            age: 18,   // 年龄
            hometown: '南昌',   // 住址
            isSingle: true   //是否单身
            }

我们使用对象字面量的方法创建了一个对象实例 junjun，并赋予了几个属性， name, age, hometown,isSingle,而在属性的冒号后面，就是这些属性值了,例如 '小菌', 18。

. 对象字面量 ：JavaScript中创建一个自定义对象有两种方法，一种是使用new，另一种是使用对象字面量形式。对象字面量是一个名值对列表，每个名值对之间用逗号分隔，并用一个大括号括起。各名值对表示对象的一个属性，名和值这两部分之间用一个冒号分隔。

由上图可知，xjun已经18岁了，但是他还是单身状态啊，有一天，他在校园里对一个女生一见钟情，这个女生是校园里的女神，这里我们叫她xk（小可）

js 复制代码

const xk = {
            name: '小可',
            age: 18,
            hometown: '南昌',
            emotion: 50
            }

对象的本质：属性 + 方法

小菌十分喜欢他的女神小可，但是怎么样才能跟小可谈恋爱呢？于是，再苦思良久之后，小菌想到了一个办法，那就是送花给她的女神。怎么样小菌才能送花给他的女神呢？这里我们在xjun这个对象里，写入一个送花的方法。

js 复制代码

const xjun = {
            name: '小菌', // key value  姓名
            age: 18,   // 年龄
            hometown: '南昌',   // 住址
            isSingle: true,   //是否单身
            sendFlower(receiver){   //送花
                console.log(this);  //对象方法内部this 指向本身 
                //输出{name: '况君豪', age: 18, hometown: '南昌', isSingle: true, sendFlower: ƒ}
                receiver.receiveFlower(this);
            }

receiver作为函数的形参，这里应该传入一个对象进去，因为收花的人是对象，例如：xjun.sendFlower(xk)

小菌这个对象送花的方法写完了，那么女神小可怎么收到花呢？这里我们可以给xk这个对象写一个收花的方法，这样可以确保小可可以收到花，如下

js 复制代码

const xk = {
            name: '小可',
            age: 18,
            emotion: 50,
            hometown: '南昌',
            receiveFlower(sender){
                 console.log(`${this.name}收到${sender.name}花`)
                 //这里使用字符串模板输出，使代码更加美观
                 if(this.emotion < 80){
                    console.log('滚');
                }
                else{
                    console.log('我们在一起吧');
                }
            }
            xjun.sendFlower(xk) //输出 小可收到小菌花

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

代理模式

在JavaScript中，代理模式是一种结构型设计模式，它允许通过代理对象控制对真实对象的访问，即通过代理对象间接访问真实对象。

在本文中，这个例子中的代理对象出现了。

js 复制代码

const xh = {
            name: '小红',
            hometown: '南昌',
            // method  接口 Interface
            receiveFlower(sender){
                if(xk.emotion >= 80){
                    xk.receiveFlower(sender)
                }
                else{
                    setTimeout(function(){
                        xk.emotion = 99
                        xk.receiveFlower(sender)
                    },2000) //在2秒后，小可的心情变成99
                }
                xjun.sendFlower(xh) 
             //输出 小可收到小菌花
             //    我们在一起吧

这里我们定义xh这个对象，她是小可的室友小红，她跟小可有同样的方法，当小菌将花送给小红时，小红会观察小可的心情，当xk.emotion >= 80 时，将花转交给小可，这样小菌跟小可就可以在一起了！

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

总结

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

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

小白请看 JS大项目宝典：设计模式 教你如何追到心仪的女神

前言：

正文:

对象

对象的本质 ： 属性 + 方法

代理模式

总结

小白请看 JS大项目宝典：设计模式教你如何追到心仪的女神

对象的本质：属性 + 方法