摘要：面向对象设计里的设计模式之代理模式，相信很多朋友已经很熟悉了。代表当前执行方法的实例，即方法调用者。代表具体的方法名称。现在我们再次调用，传入构造器返回的代理对象打印输出，代理逻辑生效了和的一样优雅地实现了代理设计模式。
面向对象设计里的设计模式之Proxy（代理）模式，相信很多朋友已经很熟悉了。比如我之前写过代理模式在Java中实现的两篇文章：
Java代理设计模式(Proxy)的四种具体实现：静态代理和动态代理
Java动态代理之InvocationHandler最简单的入门教程
其实和Java一样，JavaScript从语言层面来讲，也提供了对代理这个设计模式的原生支持。我们用一个不到100行代码的例子来看看吧。
下面的代码创建了一个名叫Jerry的Employee对象，然后用函数hireEmployee雇用该Employee进行JavaScript开发：
function Employee(name){
this.name = name;
};
Employee.prototype.work = function(language){
console.log(this.name + " is developing with: " + language);
}
let jerry = new Employee("Jerry");
function hireEmployee(employee, language){
employee.work(language);
}
hireEmployee(jerry, "JavaScript");
打印输出：
Jerry is developing with: JavaScript
现在Jerry在他的业余时间里想学习一些其他的编程语言，但是不想影响自己的本职工作。用技术语言来讲，就是希望Employee原型方法work执行时，打印一行额外的信息，但是不允许修改Employee函数和Employee.prototype.work本身。这时Proxy这种代理模式就派上用场了。
我们为work方法创建一个代理逻辑：
var proxyLogic = {
get: function(target, name) {
if( name == "work"){
var oriFun = target[name].bind(target);
return function(language){
oriFun(language);
console.log("and also study other language in spare time");
}
}
}
}
;
重点看第二行的get方法。两个输入参数，target和name。Target代表当前执行方法的实例，即方法调用者。Name代表具体的方法名称。第4行我们把原始方法取出来，存放到变量oriFun里。第五行返回一个新的JavaScript函数，该函数体的实现逻辑为首先在第六行调用原始方法，然后在第七行执行额外的逻辑。
大家在回忆我之前介绍Java InvocationHandler实现动态代理的文章：
Java动态代理之InvocationHandler最简单的入门教程
是不是思路完全一样？都是在代理逻辑里调用原始方法，然后再执行额外的代码。
这个proxyLogic生成后，怎么把它同我们原始的需要被代理的代码关联起来呢？
只需要1行代码：
var jerryProxy = new Proxy(jerry, proxyLogic );
Proxy函数是JavaScript提供的原生代理构造器，需要两个输入参数：
第一个输入参数是我们的Employee实例，即需要被代码的对象实例，第二个输入参数是我们开发好的代理逻辑。返回的即是装配好的代理对象，该代理对象的work方法实现在第二个输入参数里。
现在我们再次调用hireEmployee，传入Proxy构造器返回的代理对象：
hireEmployee(jerryProxy, "JavaScript");
打印输出，代理逻辑生效了：
和Java的Invocation一样优雅地实现了代理设计模式。
使用Proxy代理设计模式的一个实际例子，请参考我的文章：
巧用代理设计模式(Proxy Design Pattern)改善前端图片加载体验
要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/98587.html
摘要：为了便于您更清晰的理解的体系架构，在这里我将为您展示年开发者知识图谱，它包含了所有开发过程中的关键部分。在数据展示前端导入导出图表面板数据绑定等场景无需大量代码开发和测试，可极大节省企业研发成本并降低交付风险。 作为 Vue 的初学者，您或许已经听过很多关于它的专业术语了，例如：单页面应用程序、异步组件、服务器端呈现等，您可能还听过和Vue经常一起被提到的工具和库，如Vuex、Webp...
摘要：网上有很多前端的学习路径文章，大多是知识点罗列为主或是资料的汇总，数据量让新人望而却步。天了解一个前端框架。也可以关注微信公众号晓舟报告，发送获取资料，就能收到下载密码，网盘地址在最下方，获取教程和案例的资料。 前言 好的学习方法可以事半功倍，好的学习路径可以指明前进方向。这篇文章不仅要写学习路径，还要写学习方法，还要发资料，干货满满，准备接招。 网上有很多前端的学习路径文章，大多是知...
摘要：用函数式编程对进行断舍离当从业的老司机学会函数式编程时，他扔掉了的特性，也不用面向对象了，最后发现了真爱啊作用域和闭包作用域和闭包在里非常重要。旨在帮助非函数式编程的同学，能快速切入到函数式编程的理念。 1、用函数式编程对JavaScript进行断舍离 当从业20的JavaScript老司机学会函数式编程时，他扔掉了90%的特性，也不用面向对象了，最后发现了真爱啊！！！ https:/...
摘要：用函数式编程对进行断舍离当从业的老司机学会函数式编程时，他扔掉了的特性，也不用面向对象了，最后发现了真爱啊作用域和闭包作用域和闭包在里非常重要。旨在帮助非函数式编程的同学，能快速切入到函数式编程的理念。 1、用函数式编程对JavaScript进行断舍离 当从业20的JavaScript老司机学会函数式编程时，他扔掉了90%的特性，也不用面向对象了，最后发现了真爱啊！！！ https:/...
摘要：用函数式编程对进行断舍离当从业的老司机学会函数式编程时，他扔掉了的特性，也不用面向对象了，最后发现了真爱啊作用域和闭包作用域和闭包在里非常重要。旨在帮助非函数式编程的同学，能快速切入到函数式编程的理念。 1、用函数式编程对JavaScript进行断舍离 当从业20的JavaScript老司机学会函数式编程时，他扔掉了90%的特性，也不用面向对象了，最后发现了真爱啊！！！ https:/...
阅读 1619·2019-08-30 15:55
阅读 940·2019-08-30 15:44
阅读 830·2019-08-30 10:48
阅读 1949·2019-08-29 13:42
阅读 3152·2019-08-29 11:16
阅读 1125·2019-08-29 11:09
阅读 2003·2019-08-26 11:46
阅读 586·2019-08-26 11:44
