本文共 1791 字，大约阅读时间需要 5 分钟。

代理模式的理解

Proxy（代理模式）：为其他对象提供一种代理以控制这个对象的访问

• 使用者无权访问目标对象
• 中间加代理，通过哦代理做授权和控制

比方：比如买火车票这件小事：黄牛相当于是我们本人的的代理，我们可以通过黄牛买票。通过黄牛买票，我们可以避免与火车站的直接交互，可以省很多事，并且还能享受到黄牛更好的服务(如果钱给够的话)

类图

传统类图

顶层有一个Image接口，下面分别有，RealImage类和ProxyImage类，后者是前者的代理，而且都实现Image接口，有一点是需要特别注意的是：ProxyImage类的display()方法需要和RealImage的display()方法完全一样。

简化js类图

代理的方法要和被代理的完全一样

js代码

class Realimg{       constructor(fileName){           this.fileName = fileName        this.load()    }    display(){           console.log(`this is ${   this.fileName}`);    }    loda(){           console.log(`loading...${   this.fileName}`);    }}class ProxyImg{       constructor(fileName){           this.proxy = new Realimg(fileName)    }    display(){           this.proxy.display()    }}const proxyImg = new ProxyImg('libi.jpg')proxyImg.display()

代理模式在前端的使用场景

网页事件代理

这里用到了事件冒泡的机制，将多个子元素的方法用父元素代理，这样可以大量的减少代码冗余

注意这里的target,nodeName得到的标签名是大写表示的

jQuery的$.proxy

在没有ES6的箭头函数之前，上面setTimeout里面是获取不到外层的的this对象的，一般常用的是如下解决方法，

但除上面的解决方法之外，还有更好的解决方法用$.proxy如下，可以少定义一个变量。

$.proxy()里面传入的是一个函数

ES6的Proxy语法

点击下面链接快速理解Proxy

下面用此语法模拟了一个场景，想要找明星出演，不能直接要到明星的电话，只能要到经济人的电话，出演的报价也是经纪人所决定的，

const actor = {       name:'JkChen',    phone:'12312312333',}const agent = new Proxy(actor,{       get(target,key){           if(key === 'phone'){               return 'agent 111111111111'        }        if(key === 'price'){               return 2        }        return target[key]    },    set(target,key,value){           if(key === 'setPrice' && value < 2){                  console.log('请不起');        }else{               console.log('钱够了，明星来了');            target[key] = value            return true        }    }   })console.log(agent.name);console.log(agent.phone);console.log(agent.price);agent.setPrice = 1

总结

• 当代理类和目标类的分离，隔离开目标类和使用者，需要解决解决一些代理和授权问题时
• 此设计模式符合开放封闭原则，隔离解耦