100行代码让您学会JavaScript原生的Proxy设计模式

面向对象设计里的设计模式之Proxy（代理）模式，相信很多朋友已经很熟悉了。

其实和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的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:

100行代码让您学会JavaScript原生的Proxy设计模式相关推荐

SAP系统和微信集成的系列教程之八：100行代码在微信公众号里集成地图搜索功能
本系列的英文版Jerry写作于2017年,这个教程总共包含十篇文章,发表在SAP社区上. 系列目录 (1) 微信开发环境的搭建 (2) 如何通过微信公众号消费API (3) 微信用户关注公众号之后,自 ...
100行代码搞定实时视频人脸表情识别(附代码)
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达本文转自|OpenCV学堂好就没有写点OpenCV4 + Open ...
Android鬼点子 100行代码，搞定柱状图!
最近,项目中遇到一个地方,要用到柱状图.所以这篇文章主要讲怎么搞一个柱子. 100行代码,搞定柱状图! 我的印象中柱子是这样的. 恩,简单,一个View直接放到xml,搞定! 但,设计师给的柱子是这样 ...
react hooks使用_我如何使用React Hooks在约100行代码中构建异步表单验证库
react hooks使用 by Austin Malerba 奥斯汀·马勒巴(Austin Malerba) 我如何使用React Hooks在约100行代码中构建异步表单验证库 (How I bu ...
100行代码实现最简单的基于FFMPEG+SDL的视频播放器
简介 FFMPEG工程浩大,可以参考的书籍又不是很多,因此很多刚学习FFMPEG的人常常感觉到无从下手.我刚接触FFMPEG的时候也感觉不知从何学起. 因此我把自己做项目过程中实现的一个非常简单的视频 ...
用python画苹果的logo_简单几步，100行代码用Python画一个蝙蝠侠的logo
转自:菜鸟学Python 简单几步,100行代码用Python画一个蝙蝠侠的logo-1.jpg (35.33 KB, 下载次数: 0) 2020-7-30 12:04 上传蝙蝠侠作为DC漫画的核心 ...
WebServer应用示例：不到100行代码玩转Siri语音控制 | ESP32轻松学（Arduino版）
ESP32轻松学系列文章目录: ESP32 概述与 Arduino 软件准备蓝牙翻页笔(PPT 控制器) B 站粉丝计数器 Siri 语音识别控制 LED 灯 Siri 语音识别获取传感器数据本期 ...
100行代码实现最简单的基于FFMPEG+SDL的视频播放器（SDL1.x）
===================================================== 最简单的基于FFmpeg的视频播放器系列文章列表: 100行代码实现最简单的基于FFMPEG ...
PONG - 100行代码写一个弹球游戏
大家好,欢迎来到 Crossin的编程教室 ! 今天跟大家讲一讲:如何做游戏游戏的主题是弹球游戏<PONG>,它是史上第一款街机游戏.因此选它作为我这个游戏开发系列的第一期主题. 游戏引 ...

100行代码让您学会JavaScript原生的Proxy设计模式

100行代码让您学会JavaScript原生的Proxy设计模式相关推荐

最新文章

热门文章