js设计模式之 代理模式与应用场景(2)

在代理模式（Proxy Pattern）中，一个类代表另一个类的功能。这种类型的设计模式属于结构型模式。

在代理模式中，我们创建具有现有对象的对象，以便向外界提供功能接口。

简而言之（其实已经够简短了吧），就两个点：

画个图 来 形象化一下

也可以说，代理，“望文生义”，就是 代理人。被代理者所拥有的功能，代理也有。

接下来可以看粗俗易懂的UML图

2.是时候看粗俗易懂的代码演示

==================================================================================

class Yangchaoyue {

qianHeTong() {

console.log(“签合同”);

}

}

class JingJiRen {

constructor(){

this.superStar = new Yangchaoyue();

}

qianHeTong(){

this.superStar.qianHeTong();

}

}

let jingJiRen = new JingJiRen();

jingJiRen.qianHeTong(); //签合同

从代码可以看出，杨超越确实有签合同的能力，但是签合同这事应该不会是杨超越本人去的吧，而应当是她的经纪人去代签的。

3.经典使用场景

===========================================================================

3.1 事件委托

document.addEventListener(‘DOMContentLoaded’, function() {

let app = document.getElementById(‘todo-app’);

app.addEventListener(‘click’, function(e) {

if (e.target && e.target.nodeName === ‘LI’) {

let item = e.target;

alert('you clicked on item: ’ + item.innerHTML)

}

})

})

关于事件委托 详细可以看我的另一篇文章

事件委托

3.2.Jquery中的proxy—$.proxy

为什么这里要用到代理呢？

因为如果不用代理的话，这里的this的指向已经变成了window了哦。

所以我们需要这样写

当然，也可以用$.proxy()

$.proxy(fn,this)这个方法的作用就是让this.的指向指向fn。

3.3 ES6 Proxy

Proxy 代理，在 JavaScript 似乎很陌生，却又在生活中无处不在。或许有人在学习 ES6 的时候有所涉猎，但却并未真正了解它的使用场景，平时在写业务代码时也不会用到这个特性。

我们仍然用明星与经纪人的例子来讲解

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！